❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

第8章 掌握CSS层叠样式表——背景声明块与显示模式

✇掘金 前端
作者 客白村
2025年3月30日 17:33

1 CSS2的背景声明块

背景相关属性

⚠注意：
  • 背景图片设置平铺时，背景图片将沿着平铺的方向重复占满该方向长度，超出长度的图片部分不显示。
  • 网页中，使用背景图实现装饰性的图片效果。

2 CSS3的背景声明块

2.1 背景原点

  • 属性：background-origin

  • 作用：设置背景图的原点。

  • 语法：

    • padding-box ：从 padding 区域开始显示背景图像。—— 默认值
    • border-box ： 从 border 区域开始显示背景图像。
    • content-box ： 从 content 区域开始显示背景图像

  • 效果： 背景原点设置效果

  • 注意： 默认以左上角为原点，如果背景图面积小于容器面积，则会自动以类似“铺砖”的方式平铺整个盒子，比如垂直方向进行平铺的某张图片因面积大难以完全放下，就会自动拆分成2部分，将其中一部分放置于原地方平铺，另外一部分就放置于盒子垂直方向的最上面。水平方向的平铺也是同理。

2.2 背景剪切

  • 属性：background-clip
  • 作用：设置背景图的向外裁剪的区域。
  • 语法：
    • border-box ： 从 border 区域开始向外裁剪背景。
    • padding-box ：从 padding 区域开始向外裁剪背景。—— 默认值
    • content-box ： 从 content 区域开始向外裁剪背景。
    • text ：背景图只呈现在文字上。（需要让字体颜色变成全透明，即设置字体为color:transparent;）
  • 注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。

2.3 背景尺寸

  • 属性：background-size
  • 作用：设置背景图的尺寸。
  • 语法：
    • 用长度值指定背景图片大小，不允许负值。 background-size: 300px 200px;
    • 用百分比指定背景图片大小，不允许负值。 background-size: 100% 100%;
    • auto ： 背景图片的真实大小。 （默认值）
    • contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但可能会造成容器里部分区域没有背景图片。 background-size: contain
    • cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但背景图片有可能显示不完整。（相对比较好的选择） background-size: cover

2.4 背景固定

  • 属性：background-position
  • 作用：背景不会随着元素的内容滚动。
  • 语法：
    • 属性值fixed：可以让背景图固定，background-attachment: fixed;

2.5 背景属性复合写法

  • 语法：background: color url repeat position / size origin clip
  • 注意：
    • origin 和 clip 的值若一样，可以只写一个值，表示 origin 和 clip 都设置；如果设置了两个值，前面的值是 origin ，后面的值是 clip 。
    • size 的值必须写在 position 值的后面，并且用/分开。

2.6 多背景图

  • 语法：使用background包裹具体的背景属性复合写法，多个具体的背景属性复合写法用,隔开;
  • 案例：
background: url(../images/bg-lt.png) no-repeat,
            url(../images/bg-rt.png) no-repeat right top, 
            url(../images/bg-lb.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom

3 元素的显示模式

3.1 元素的3种显示模式

元素显示模式

3.2 以元素显示模式分类

总结各元素的显示模式

3.3 修改元素的显示模式

修改元素的显示模式

4 鼠标相关属性

鼠标相关属性

5 案例：热词导航

5.1 视觉效果

热词导航视觉效果

5.2 准备素材

略

5.3 制作思路

  • 第1步 先制作1个导航。
  • 第2步 用链接标签包裹热词。
  • 第3步 去掉链接的默认样式，如下划线、蓝色等。
  • 第4步 将链接的显示模式设置为块级元素（display:block;）。
  • 第5步 设置链接元素的宽度为200px以及高度为80px， 将字体大小设置为18px。
  • 第6步 使用文本居中属性将内容水平居中（text-align:center;），使用行高属性将内容垂直居中（line-height：80px）。
  • 第7步 设置链接内容背景色以及文字内容背景色。
  • 第8步 借助动态伪类选择器实现鼠标滑动让链接内容背景色变色（a:hover {background-color:#608dd9}）。
  • 第9步 再复制4个链接。

热词导航制作思路

5.4 使用技术

  1. HTML标签

    • 链接标签：<a>

  2. CSS 样式

    • 元素显示：display:block;
    • 动态伪类选择器：a:hover{...}
    • ...

5.5 编码实现

  1. HTML标签
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
  1. CSS 样式
<style>
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}

/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
</style>

6 案例：五彩导航

6.1 视觉效果

五彩导航视觉效果

6.2 准备素材

五彩导航素材

6.3 制作思路

  • 第1步 先制作1个导航。
  • 第2步 用链接标签包裹热词。
  • 第3步 去掉链接的默认样式，如下划线、蓝色等。
  • 第4步 将链接的显示模式设置为块级元素（display:inline-block;）。
  • 第5步 设置链接元素的宽度与高度同背景图片同样宽高。
  • 第6步 使用文本居中属性将内容水平居中（text-align:center;），使用行高属性将内容垂直居中（line-height：80px）。
  • 第7步 给链接设置背景图片。
  • 第8步 借助动态伪类选择器实现鼠标滑动让链接内容背景色变色（a:hover {background: url('...')}）。
  • 第9步 再复制4个链接。

6.4 使用技术

  1. HTML标签

    • 链接标签：<a>

  2. CSS 样式

    • 元素显示：display: inline-block;
    • 动态伪类选择器：a:hover {...}
    • ...

6.5 编码实现

  1. HTML 标签
  <a href="#" class="one">五彩导航</a>
  <a href="#" class="two">五彩导航</a>
  <a href="#" class="three">五彩导航</a>
  <a href="#" class="four">五彩导航</a>
  1. CSS 样式
<style>
    a {
      width: 120px;
      height: 58px;
      background-color: pink;

      /* 转换成行内块元素 */
      display: inline-block;
      /* 文本水平居中 */
      text-align: center;
      /* 文本垂直居中 */
      line-height: 50px;
      /* 文字文本修饰 */
      text-decoration: none;
      color: #fff;
    }

    .one {
      background: url('./images/bg1.png');
    }
    .two {
      background: url('./images/bg2.png');
    }
    .three {
      background: url('./images/bg3.png');
    }
    .four {
      background: url('./images/bg4.png');
    }

    .one:hover {
      background: url('./images/bg5.png');
    }
    .two:hover {
      background: url('./images/bg6.png');
    }
    .three:hover {
      background: url('./images/bg7.png');
    }
    .four:hover {
      background: url('./images/bg8.png');
    }

</style>

8 案例： Banner图

8.1 视觉效果

Banner视觉效果

8.2 准备素材

素材放在当前项目的根目录下的imgs目录中。

Banner素材

8.3 制作思路

  • 第1步 用<div>标签创建一个名为banner容器，给容器设置高度与背景色。
  • 第2步 给banner容器设置背景图片，去掉背景图片平铺效果，并将其位置设置在容器左下角。
  • 第3步 用<h2>标签包裹标题。
  • 第4步 给banner容器设置文本右对齐。
  • 第5步 设置<h2>标签的颜色与字体大小。
  • 第6步 用<p>标签包裹介绍语，并设置颜色与字体大小。
  • 第7步 用<a>标签包裹短语，并改变元素显示模式为行内块元素，设置宽高、背景色、颜色与字体大小。

Banner

8.4 使用技术

  1. HTML标签

    • 排版标签： <div>、<h2>、<p>
    • 图片标签：<img>

  2. CSS 标签

    • 背景图片位置： background-position: left bottom;
    • 元素显示：display: inline-block;

8.5 编码实现

  1. HTML 标签
<div class="banner">
    <h2>让创造产生价值</h2>
    <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
    <a href="#">我要报名</a>
</div>
  1. CSS 样式
<style>
    .banner {
      height: 500px;
      background-color: #f3f3f4;
      background-image: url(./images/bk.png);
      background-repeat: no-repeat;
      background-position: left bottom;

      /* 文字控制属性，继承给子级 */
      text-align: right;
      color: #333;
    }

    .banner h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 100px;
    }

    .banner p {
      font-size: 20px;
    }

    .banner a {
      width: 125px;
      height: 40px;
      background-color: #f06b1f;

      display: inline-block;
      /* 转块级无法右对齐，因为块元素独占一行 */
      /* display: block; */

      text-align: center;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }
</style>
❌
❌