CSS3中新增的背景属性

程序员文章站 2022-05-29 15:23:33

...

新增的背景属性

属性	功能
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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性
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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性
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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性
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>

CSS3中新增的背景属性
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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性

<!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>

CSS3中新增的背景属性
4.兼容的浏览器

background-size和其他一些CSS3属性一样，需要加上自己的别名。
CSS3中新增的背景属性

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

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

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

CSS3中新增的背景属性

新增的背景属性

1.background-clip属性

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

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

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

ES6中Math对象新增的方法实例详解

JavaScript中的原型prototype属性使用详解

JavaScript中Number.MIN_VALUE属性的使用示例

JavaScript中Number.MAX_VALUE属性的使用方法

JavaScript中length属性的使用方法

HTML5新增的表单元素和属性实例解析

解决vue打包css文件中背景图片的路径问题

BootStrap框架中的data-[ ]自定义属性理解(推荐)

爱奇艺视频助手如何提取视频中的背景音乐？

IDEA中怎么设置背景? idea置黑色或白色背景的教程