CSS3 背景

前言

  • CSS3 中包含几个新的背景属性,提供更大背景元素控制。
属性 描述 CSS 备注 🔗
background 简写属性,作用是将背景属性设置在一个声明中 1 🔗
background-color 设置元素的背景颜色 1 🔗
background-image 把图像设置为背景 1 🔗
background-repeat 设置背景图像是否及如何重复 1 🔗
background-attachment 背景图像是否固定或者随着页面的其余部分滚动 1 🔗
background-position 设置背景图像的起始位置 1 🔗
background-clip 指定背景图像的绘画区域 3 🔗
background-origin 指定背景图像的定位区域 3 🔗
background-size 指定背景图片的大小 3 🔗

1、background-clip

  • CSS3 中 background-clip 背景剪裁属性是从指定位置开始绘制。
属性 描述 CSS 备注 🔗
background-clip 规定背景的绘制区域 3 🔗
  • 属性值
描述
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)
padding-box 背景绘制在衬距方框内(剪切成衬距方框)
content-box 背景绘制在内容方框内(剪切成内容方框)
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <style>
    #example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    }
    #example2 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;

    background-clip: padding-box;
    }
    #example3 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;

    background-clip: content-box;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <p>没有背景剪裁 (border-box 没有定义):</p>
    <div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box:</p>
    <div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box:</p>
    <div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.</p>
    </div>
  • 效果


    没有背景剪裁 (border-box 没有定义):



    Lorem Ipsum Dolor


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



    background-clip: padding-box:



    Lorem Ipsum Dolor


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



    background-clip: content-box:



    Lorem Ipsum Dolor


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



2、background-image

  • CSS3 中可以通过 background-image 属性添加背景图片。

  • CSS3 允许你在元素上添加多个背景图像。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

属性 描述 CSS 备注 🔗
background-image 把图像设置为背景 1 🔗
background-position 设置背景图像的起始位置 1 🔗
background-repeat 设置背景图像如何平铺 1 🔗
  • 属性值
image 值 描述
url(‘URL’) 图像的URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线性渐变的 “图像” (从上到下)
radial-gradient() 用径向渐变创建 “图像”。(center to edges)
repeating-linear-gradient() 创建重复的线性渐变 “图像”
repeating-radial-gradient() 创建重复的径向渐变 “图像”
inherit 指定背景图像应该从父元素继承
position 值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果仅指定一个关键字,其他值将会是 “center”
x% y% 第一个值是水平位置,第二个值是垂直。左上角是 0%0%。右下角是 100%100%。
如果仅指定了一个值,其他值将是 50%。默认值为:0%0%
xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是 0。单位可以是像素(0px0px)
或任何其他 CSS 单位。如果仅指定了一个值,其他值将是 50%。你可以混合使用 % 和 positions
inherit 指定 background-position 属性设置应该从父元素继承
repeat 值 描述
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repea 属性设置应该从父元素继承
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    #example1 {
    background-image: url(https://demo.qianchia.com/media/image/demo20.png), url(https://demo.qianchia.com/media/image/demo19.png);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;

    padding: 15px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
    commodo consequat.</p>
    </div>
  • 可以给不同的图片设置多个不同的属性。

    1
    2
    3
    4
    5
    6
    7
    <style>
    #example1 {
    background: url(https://demo.qianchia.com/media/image/demo20.png) right bottom no-repeat, url(https://demo.qianchia.com/media/image/demo19.png) left top repeat;

    padding: 15px;
    }
    </style>
  • 效果



    Lorem Ipsum Dolor


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



3、background-origin

  • background-origin 属性指定了背景图像的位置区域。

  • content-box, padding-box 和 border-box 区域内可以放置背景图像。

属性 描述 CSS 备注 🔗
background-origin 规定背景图片的定位区域 3 🔗
  • 属性值
描述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
    div {
    border: 1px solid black;
    padding: 35px;
    background-image: url(https://demo.qianchia.com/media/image/demo9.png);
    background-repeat: no-repeat;
    background-position: left;
    }
    #div1 {
    background-origin: border-box;
    }
    #div2 {
    background-origin: content-box;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <p>背景图像边界框的相对位置:</p>
    <div id="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>背景图像的相对位置的内容框:</p>
    <div id="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
  • 效果


    背景图像边界框的相对位置:



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



    背景图像的相对位置的内容框:



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



4、background-size

  • CSS3 以前,背景图像大小由图像的实际大小决定。CSS3 中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。

  • 指定的大小是相对于父元素的宽度和高度的百分比的大小。

属性 描述 CSS 备注 🔗
background-size 规定背景图片的尺寸 3 🔗
  • 属性值
描述
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto (自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 “auto (自动)”
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

4.1 重置背景图像

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
    body {
    background: url(https://demo.qianchia.com/media/image/demo20.png);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    }
    </style>
    1
    2
    3
    4
    5
    <body>
    <p>Lorem ipsum,中文又称 “乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。</p>

    <p>原始图片: <img src="https://demo.qianchia.com/media/image/demo20.png" alt="Flowers" /></p>
    </body>
  • 效果



    Lorem ipsum,中文又称 “乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。


    原始图片: Flowers



4.2 伸展背景图像完全填充内容区域

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
    div {
    background: url(https://demo.qianchia.com/media/image/demo20.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
    vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>
  • 效果


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
    vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

5、多重背景

  • CSS3 多重背景 (multiple backgrounds),也就是 CSS2 里 background 的属性外加 origin、clip 和 size 组成的新 background 的多次叠加。

  • 缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

  • 语法缩写如下:

    1
    2
    background: [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] 
    | [background-attachment] | [background-clip] | [background-origin], ...
  • 可以把上面的缩写拆解成以下形式:

    1
    2
    3
    4
    5
    6
    7
    8
    background-image: url1, url2, ..., urlN;
    background-repeat: repeat1, repeat2, ..., repeatN;
    backround-position: position1, position2, ..., positionN;
    background-size: size1, size2, ..., sizeN;
    background-attachment: attachment1, attachment2, ..., attachmentN;
    background-clip: clip1, clip2, ..., clipN;
    background-origin: origin1, origin2, ..., originN;
    background-color: color;
  • 注意:

    • 用逗号隔开每组 background 的缩写值;
    • 如果有 size 值,需要紧跟 position 并且用 “/“ 隔开;
    • 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
    • background-color 只能设置一个。

6、浏览器支持

属性
background-image
(with multiple backgrounds)
4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-
9.0 4.0
3.6 -moz-
4.1
3.0 -webkit-
10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、background-clip
  3. 3. 2、background-image
  4. 4. 3、background-origin
  5. 5. 4、background-size
    1. 5.1. 4.1 重置背景图像
    2. 5.2. 4.2 伸展背景图像完全填充内容区域
  6. 6. 5、多重背景
  7. 7. 6、浏览器支持
隐藏目录