新增的背景相关的属性

1. background-origin

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);
            
            background-image: url('../images/bg01.jpg');
            background-repeat: no-repeat;
            /* 
            padding-box：从padding区域开始显示背景图（默认值）
            border-box：从border区域开始显示背景图
            content-box：从content区域开始显示背景图
            */
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="box1">带带大师兄</div>
</body>
</html>

2. background-clip

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-clip</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 120px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);
            color: transparent;

            background-image: url('../images/bg02.jpg');
            background-repeat: no-repeat;
            background-origin: border-box;
            /* 
            padding-box：从padding区域开始向外裁剪背景（默认值）
            border-box：从border区域开始向外裁剪背景
            content-box：从content区域开始向外裁剪背景
            text：背景图只呈现在文字上
            */
            background-clip: text;
        }
    </style>
</head>
<body>
    <div class="box1">带带大师兄</div>
</body>
</html>

3. background-size

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-size</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background-image: url('../images/bg03.jpg');
            /* 手动设置 */
            /* background-size: 400px 400px; */

            /* 按百分比设置 */
            /* background-size: 100%; */

            /* 将背景图等比例缩放，使其的宽或高（看谁最大），与容器的宽或高相等，
            再将完整图片包含在容器内（可能显示不全） */
            /* 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复合属性</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255, 0, 0, 0.7);

            /* background: 背景颜色 url 是否重复 位置 / 大小 原点 裁剪方式 */
            background: skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px content-box;
        }
    </style>
</head>
<body>
    <div class="box1">带带大师兄</div>
</body>
</html>

5. 多背景图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多背景图</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background: url('../images/bg-lt.png') no-repeat left top,
                        url('../images/bg-rt.png') no-repeat right top,
                        url('../images/bg-lb.png') no-repeat left bottom,
                        url('../images/bg-rb.png') no-repeat right bottom;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

新增的背景相关的属性

评论 (0)