CSS3新特性：背景属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/SSLUKA/article/details/106576570

本文介绍了CSS3中新增的背景属性，包括background-clip控制背景显示区域，background-origin指定绘制背景图像的起点，background-size设定背景图像尺寸，以及如何在一个元素中显示多个背景图像。详细讲解了各个属性的作用、分类、使用方法和示例，帮助理解CSS3背景属性的灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增的背景属性

属性	功能
backgroun-clip	指定背景的显示范围
background-origin	指定绘制背景图像时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺时的循环方式

1.background-clip属性

（1）作用
主要是用来控制背景显示区域
background-clip：border-box||padding-box||content-box
（2）分类

名称	作用
border-box	此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉
padding-box	背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉
content-box	背景从content区域向外裁剪，超出content区域的背景将被裁剪掉

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip: border-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip:padding-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>

在这里插入图片描述
4.ps

2.background-origin属性指定绘制背景图像的绘制起点

（1）作用
在绘制背景图像时，默认是从内补白（padding）区域的左上角开始绘制的，但是可以利用background-origin属性来指导绘制时从边框左上角开始绘制，或者是从内容的左上角开始绘制。
tip：为了兼容新老版本的浏览器，最好在使用该属性时，将新老语法一起用上，老语法在前，新语法在后。
background-origin：padding || border || content
background-origin：padding-box || border-box || content-box

（2）分类

名称	作用
padding-box(padding)	此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片
border-box（border）	此值决定background-position起始位置从border的外边缘开始显示背景图片
content-box（content）	此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: border-box;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述
4.提示
background-origin虽然现代浏览器都支持，但在不同的内核浏览器下还是需要带上各自的前缀，这样在实际应用中最好接下面的语法规则书写，以保证background-origin的都能正常运行

background-size属性指定背景图像的尺寸

1.使用方法
background-size：auto|| < length > || < percentage > || cover || contain
2.分类

名称	作用
auto	为默认值，保持背景图片的原始高度和宽度
length	设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为“auto”
percentage	以父元素的百分比来设置背景图片的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”
cover	此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover，将背景元素放大到适合容器的大小，但这种方法会使背景图片失真

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size: auto;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:600px 300px;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述
ps:这样会造成图片失真

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:600px;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述
ps：这种会保持原有的宽高比，但是这样就会造成效果更佳的错乱
<4>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:50% 50%;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:50%;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:cover;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-origin属性</title>
    <style>
        div{
            width:600px;
            height:300px;
            background-image:url("bj.png");
            background-repeat: no-repeat;
            border:dashed 30px green;
            padding:30px;
            background-origin: content-box;
            background-size:contain;
        }
    </style>
</head>
<body>
<h1>background-origin</h1>
<div></div>
</body>
</html>

在这里插入图片描述
4.兼容的浏览器

background-size和其他一些CSS3属性一样，需要加上自己的别名。
在这里插入图片描述

background-break属性指定背景图像的尺寸

1.概念
CSS3里标签元素能被分在不同区域（如：让内联元素span跨多行），background-break属性能够控制背景在不同区域显示。
2.分类

名称	作用
background-break：continuous	此属性是默认值，忽视区域之间的间隔空隙（给它们应用图片就好像把它们看成一个小区域一样）
background-break：bounding-box	重新考虑区域之间的间隔
background-break：each-box	对每一个独立的标签区域进行背景的重新划分

一个元素中显示多个背景图像

**1.**在CSS3中一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，这样可以让我们对背景中所用素材的调整变得更加容易。
2.使用方法
background-image：url（1.png），url（2.png），url（3.png）；
tip：图层的排序方法：浏览器中显示时叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后的指定文件是放在最下面的。
3.例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在一个元素中显示多个背景图像</title>
    <style>
        div{
            margin:0;
            padding:0;
            width:1000px;
            height:800px;
            background-image: url("bj4.png"),url("bj3.png"),url("bj2.png"),url("bj1.png");
            background-repeat: no-repeat;/*让图片不要重复*/
            background-position: center;/*让图片位于中间*/
        }
    </style>
</head>
<body>
<h1>在一个元素中显示多个背景图像</h1>
<div></div>
</body>
</html>

在这里插入图片描述