69背景（二）

最新推荐文章于 2021-06-21 12:53:27 发布

广东码农

最新推荐文章于 2021-06-21 12:53:27 发布

阅读量47

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117947966

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景2</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: #bfa;
            background-image: url("./imgs/daina.jpg");
            background-repeat: no-repeat;
            background-position: 20px 20px;
            border: 20px red double;
            padding: 10px 10px;
            background-clip: padding-box;
            /* 
                我们的边框下面也会有背景，但我们不希望边框下面有背景，就可以用到裁剪
                    - background-clip 设置背景的范围
                        可选值：
                            border-box 默认值，背景会出现在边框的下边
                            padding-box 背景不会出现在边框，只出现在内容区和内边距
                            content-box 背景只会出现在内容区
                    
                    - background-origin 背景图片的偏移量计算的原点
                            border-box
                            padding-box 默认值，background-position从内边距处开始计算
                            content-box 背景图片的偏移量从内容区处计算

                    - background-size 设置背景图片的大小
                      第一个值表示宽度，第二个值表示高度。
                      如果只写一个值，则另外一个值等比例缩放。
                        可选值：
                            cover图片的比例不变，将元素铺满
                            contain图片的比例不变，将图片在元素中完整显示

                    - background-attachment 设置背景图片是否跟随元素移动
                        可选值：
                            scroll 默认值 背景图片会跟随元素移动
                            fixed 背景会固定在页面中，不会随元素移动

                    - background背景相关的简写属性
                        有两个注意的点：
                            1. background-size必须写在background-position后面，而且要加个斜杠
                                center center/contain
                            2. background-origin写在前面，background-clip写在后面
                        其他的没有位置要求，也没有什么需要必须写
             */ 
        }
    </style>
</head>
<body>
    <div class="box1">

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