当前位置：首页 > article >正文

CSS3新增背景属性（四）

article 2024/11/2 15:40:04

CSS3新增背景属性

1 background-origin

设置背景图原点起始位置：

padding-box：默认值从padding区域开始显示背景图像；
border-box：从border区域开始显示背景图像；
content-box：从content区域开始显示背景图像。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            background-color: darkkhaki;
            margin: 0 auto;
            /* 引入图片 */
            background-image: url("../../1、CSS选择器/imgs/fengjing.png");
            /* 图片是否重复 */
            background-repeat: no-repeat;
            /* 图片起始位置 */
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1 background-clip

裁剪背景图。

padding-box：从padding区域开始向外裁剪背景图像；
border-box：默认值，从border区域开始向外裁剪背景图像；
content-box：从content区域开始向外裁剪背景图像；
text：背景图只呈现在文字上，需要加上-webkit-，而且要将文字设置为透明色。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-clip</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            background-color: black;
            margin: 0 auto;
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;
            background-origin: padding-box;

            font-size: 100px;
            text-align: center;
            line-height: 400px;
            color: transparent;

            /* -webkit-background-clip: text; */
            background-clip: content-box;
        }
    </style>
    </style>
</head>

<body>
    <div>文字</div>
</body>

</html>

3 background-size

设置背景图尺寸。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-size</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;

            /* 用长度指定背景图片大小 */
            /* background-size: 400px 400px; */
            /* 用百分比指定图片大小  */
            /* background-size: 100% 100%; */
            /* 默认值,背景真实大小 */
            /* background-size: auto; */
            /* 等比缩放,使背景图片完全在容器内,可能导致一部分容器没有图片,以先满足的图片为准 */
            /* background-size: contain; */
            /* 等比缩放,使图片尽可能覆盖容器,有时图片可能显示不完整 */
            background-size: cover;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

4 background复合属性

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            margin: 0 auto;

            /* background: color url repeat position / size orgin clip */
            background: rgb(146, 97, 97) url("../images/bg.jpg") 5px 5px / 100% 100% border-box content-box;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

5 多背景图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>多背景图</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid black;

            background: url("../images/touxiang.png") no-repeat top left/ 20% 20%,
                url("../images/touxiang.png") no-repeat top right/ 20% 20%,
                url("../images/touxiang.png") no-repeat bottom left/ 20% 20%,
                url("../images/touxiang.png") no-repeat bottom right/ 20% 20%;
        }
    </style>
</head>

<body>
    <div></div>
</body>


</html>