文章: 阅读:

CSS Background 背景

CSSCSS

前言

  • CSS 背景属性用于定义 HTML 元素的背景。

  • 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、简写属性

  • 我们可以看到页面的背景颜色通过了很多的属性来控制。

  • 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。

属性 描述 CSS 备注 🔗
background 简写属性，作用是将背景属性设置在一个声明中 1 🔗
  • 属性值
值 说明
background-color 指定要使用的背景颜色
background-image 指定要使用的一个或多个背景图像
background-size 指定背景图片的大小
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-repeat 指定如何重复背景图像
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-position 指定背景图像的位置

  • 当使用简写属性时，属性值的顺序为：

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

  • 以上属性无需全部使用，你可以按照页面的实际需要使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
         body {
             margin-left: 200px;
             background: #5d9ab2 url('https://demo.qianchia.com/media/image/demo/demo2.png') no-repeat top left;
         }
         .container {
             text-align: center;
         }
         .center_div {
             border: 1px solid gray;
             margin-left: auto;
             margin-right: auto;
             width: 90%;
             background-color: #d0f0f6;
             text-align: left;
             padding: 8px;
         }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <body>
        <div class="container">
            <div class="center_div">
                <h1>Hello World!</h1>
            </div>
        </div>
    </body>

  • 效果

2、属性

2.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.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/demo/demo20.png), url(https://demo.qianchia.com/media/image/demo/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/demo/demo20.png) right bottom no-repeat, url(https://demo.qianchia.com/media/image/demo/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.



2.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/demo/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.



2.4 background-size

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

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

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

2.4.1 重置背景图像

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        body {
            background: url(https://demo.qianchia.com/media/image/demo/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/demo/demo20.png" alt="Flowers" /></p>
    </body>

  • 效果



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


    原始图片: Flowers



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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        div {
            background: url(https://demo.qianchia.com/media/image/demo/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.

3、背景颜色

属性 描述 CSS 备注 🔗
background-color 设置元素的背景颜色 1 🔗
  • 属性值
值 描述
color 指定背景颜色。在 CSS 颜色值近可能的寻找一个颜色值的完整列表
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色，应该从父元素继承

  • 页面的背景颜色使用在 body 的选择器中。

  • CSS 中，颜色值通常以以下方式定义:

    • 十六进制，如：”#ff0000”
    • RGB，如：”rgb(255, 0, 0)”
    • 颜色名称，如：”red”

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        h1 {
             background-color: #6495ed;
        }
        p {
             background-color: #e0ffff;
        }
        div {
             background-color: #b0c4de;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h1>CSS background-color 实例!</h1>
    <div>
        该文本插入在 div 元素中。
        <p>该段落有自己的背景颜色。</p>
        我们仍然在同一个 div 中。
    </div>

  • 效果

4、背景图像

属性 描述 CSS 备注 🔗
background-image 把图像设置为背景 1 🔗
  • 属性值
值 说明 🔗
url（’URL’） 图像的 URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线性渐变的 “图像”（从上到下） 🔗
radial-gradient() 用径向渐变创建 “图像”。（center to edges） 🔗
repeating-linear-gradient() 创建重复的线性渐变 “图像” 🔗
repeating-radial-gradient() 创建重复的径向渐变 “图像” 🔗
inherit 指定背景图像应该从父元素继承

  • 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

  • 实例

    1
    2
    3
    4
    5
    <style>
        body {
            background-image: url('https://demo.qianchia.com/media/image/demo/demo3.png');
        }
    </style>
    1
    2
    3
    <body>
        <h1>Hello World!</h1>
    </body>

  • 效果

4.1 水平或垂直平铺

属性 描述 CSS 备注 🔗
background-repeat 设置背景图像是否及如何重复 1 🔗
  • 属性值
值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repea 属性设置应该从父元素继承

  • 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调。

  • 如果图像只在水平方向平铺（repeat-x），或者垂直方向平铺（repeat-y），页面背景会更好些。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        body {
            background-image: url('https://demo.qianchia.com/media/image/demo/demo3.png');
            background-repeat: repeat-x;
        }
    </style>
    1
    2
    3
    <body>
        <h1>Hello World!</h1>
    </body>

  • 效果

4.2 设置定位与不平铺

  • 为了让页面排版更加合理，不影响文本的阅读，可以利用 background-position 属性改变图像在背景中的位置。
属性 描述 CSS 备注 🔗
background-position 设置背景图像的起始位置 1 🔗
  • 属性值
值 描述
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 属性设置应该从父元素继承

  • 不设置

    1
    2
    3
    4
    5
    6
    <style>
        body {
            background-image: url('https://demo.qianchia.com/media/image/demo/demo2.png');
            background-repeat: no-repeat;
        }
    </style>
    1
    2
    3
    <body>
        <h1>Hello World!</h1>
    </body>

  • 设置背景图像起始位置

    1
    2
    3
    4
    5
    6
    7
    <style>
        body {
            background-image: url('https://demo.qianchia.com/media/image/demo/demo2.png');
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>

  • 效果

      

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- 前的数字为支持该前缀属性的第一个浏览器版本号。

7、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:10


评论


文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、属性
    1. 3.1. 2.1 background-clip
    2. 3.2. 2.2 background-image
    3. 3.3. 2.3 background-origin
    4. 3.4. 2.4 background-size
      1. 3.4.1. 2.4.1 重置背景图像
      2. 3.4.2. 2.4.2 伸展背景图像完全填充内容区域
  4. 4. 3、背景颜色
  5. 5. 4、背景图像
    1. 5.1. 4.1 水平或垂直平铺
    2. 5.2. 4.2 设置定位与不平铺
  6. 6. 5、多重背景
  7. 7. 6、浏览器支持
  8. 8. 7、CSS 实例
隐藏目录