1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

background 可以定义元素的背景。与许多属性样式类似,它是多个属性的缩写, background-color(背景颜色)、 background-image (背景图像)、 background-clip (背景裁减区域) 、 background-origin (背景原点)、 background-position (背景位置)、 background-repeat (背景重复模式)、 background-size (背景尺寸)、 background-attachment (背景依附模式)。

$$tip

元素可以设置多个背景图像,只需用 , 分隔,比如以下的例子。

$$

<div class="box"></div>
<style>
    .box {
        width: 350px;
        height: 200px;
        background-image: url(https://3yya.com/logo-mini.png),
            url(https://3yya.com/jinji.jpg);
        background-position: center;
        background-size: auto, cover;
        background-repeat: no-repeat;
    }
</style>

$$demo

<div class="box"></div>

<style>

.box {

width: 350px;

height: 200px;

background-image: url(https://3yya.com/logo-mini.png),

url(https://3yya.com/jinji.jpg);

background-position: center;

background-size: auto, cover;

background-repeat: no-repeat;

}

</style>

$$

背景颜色

background-color 可以设置背景的颜色,取值是颜色单位。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/gOXqGoy?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景图像

background-image 属性用于设置元素背景图片,有以下取值:

  • none:默认值,没有图片。
  • image:图片地址。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/qBVgPxo?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景裁减区域

background-clip 可以设定背景的裁减区域,有以下取值:

  • border-box:默认值,背景显示在边框内。
  • padding-box:背景显示在内边距内。
  • content-box:背景显示在内容区域。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/xxPMXWY?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景原点

background-origin决定了背景图像的起始原点。

  • padding-box:默认值,背景图片以内边距作为起始原点。
  • border-box:背景图片以边框为起始原点。
  • content-box:背景图片以内容区域为起始原点。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/dyZwwqV?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景位置

background-position 决定了背景的位置,这个位置是相对于由 background-origin 定义的位置图层的。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/xxPmmMd?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景重复模式

background-repeat 定义了背景的重复模式,有以下取值:

  • repeat:图像在水平和垂直方向上重复,超出的部分会被裁剪。
  • repeat-x:图像仅在水平方向上重复,超出部分会被裁剪。
  • repeat-y:图像仅在垂直方向上重复,超出部分会被裁剪。
  • space:图像在水平和垂直方向上尽可能地重复,不会被裁剪,使用空白间隔平均分布。
  • round:在水平和垂直方向上重复,选择最接近的图像数量,并且图像会被拉伸或压缩。
  • no-repeat:不重复。

backgounrd-repeat 可以设置双值,第一个是水平方向、第二个是垂直方向。

/* 等同于 background-repeat: repeat-x; */
background-repeat: repeat no-repeat;
/* 水平方向 round 重复、垂直方向 space 重复 */
background-repeat: round space;

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/rNYPYwr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景尺寸

background-size 可以设置背景图像的尺寸,有以下取值:

  • contain:图像会完全显示,且宽或高与容器一致,并且保持原图的宽高比。
  • cover:图像会完全占满元素容器,且宽或高与容器一致,并且保持原图的宽高比。
  • 长度
  • 百分比

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/PoOVEoj?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

背景依附模式

background-attachment 可以设置背景图像的依附模式,决定背景图像是否随着元素内容或页面滚动:

  • scroll:默认值,背景图像随着页面滚动,但不随着元素内容滚动。
  • fixed:背景图像不随着页面或元素内容滚动。
  • local:背景图像随着页面或元素内容而滚动。

练习

  1. 实现以下的效果。

$$demo

<div class="box">进击的巨人</div>

<style>

.box {

width: 350px;

height: 200px;

background-image: url(https://3yya.com/jinji.jpg);

background-size: cover;

font-size: 36px;

font-weight: bold;

color: white;

line-height: 200px;

text-align: center;

}

</style>

$$