Web全栈工程师之路(二)——CSS篇(十二)——背景

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS初识(十二)——背景</title>
    <style>
        .box1{
            /*设置宽度和高度*/
            width: 1000px;
            height: 680px;
            /*设置背景颜色*/
            background-color: #bbffaa;
            /*设置背景图片*/
            background-image: url("https://api.13miki.com/img.php");
            /*设置背景图片尺寸大小*/
            background-size: contain;
            /*设置背景图片重复方式*/
            background-repeat: no-repeat;
            /*设置背景图片位置*/
            background-position: 0 0; /*偏移量设置*/
            /*设置背景填充范围*/
            background-clip: padding-box;
            /*设置背景图片位置中偏移量设置法的参考原点*/
            background-origin: content-box;
            /*设置边框样式*/
            border: 5px double #e12914;
            /*设置内边距*/
            padding: 10px;
            /*隐藏溢出*/
            overflow: auto;
        }
        .box2{
            /*设置宽度和高度*/
            height: 1000px;
            width: 250px;
            /*设置背景颜色*/
            background-color: #e12914;
            /*设置背景图片*/
            background-image: url("https://api.13miki.com/img.php");
            /*设置背景图片尺寸大小*/
            background-size: 100%;
            /*设置背景图片重复方式*/
            background-repeat: no-repeat;
            /*设置背景图片跟随元素移动*/
            background-attachment: scroll;
        }
        /*
            background-color 设置背景颜色
                可选值：
                    颜色英文名
                    rgb
                    #号代码(简写rgb)

            background-image 设置背景图片
                - 可以同时设置背景颜色和图片，这样背景颜色将会成为图片的背景色
                - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元索铺满
                - 如果背景的图片大于元素，将会一个部分背景无法完全显示
                - 如果背景图片和元素样大，则会直接正常显示

            background-repeat 设置背景的重复方式
                可选值：
                    repeat：默认值，背景会沿着x轴y轴双方向重复
                    repeat-x：沿着x轴方向重复
                    repeat-y：沿着y轴方向重复
                    no-repeat：不重复

            background-position 设置背景图片的位置
                可选值：
                    通过top left right bottom center 几个表示方位的词来设置背景图片的位置
                        使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

                    通过偏移量来指定背景图片的位置:
                        水平方向的偏移量 垂直方向变量

            background-clip 设置背景的范围
                可选值：
                    border-box：默认值，背景会出现在内容区、内边距和边框的下边
                    padding-box：背景只会出现在内容区和内边距
                    content-box：背景只会出现在内容区

            background-origin 背景图片的偏移量计算的原点
                可选值：
                    padding-box：默认值，background-position从内边距处开始计算
                    content-box：背景图片的偏移量从内容区处开始计算
                    border-box：背景图片的的偏移量从边框处开始计算

            background-size 设置背景图片的尺寸大小
                可选值：
                    (宽度) (高度) 可同时写，如果只写一个，则另一个等比例缩放
                        单位可以是px、百分比也可以是auto
                    cover：图片比例不变，将元素铺满
                    contain：图片比例不变，将图片在元素中完整显示

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

            background 简写属性，所有相关样式都可以在里面写，参数之间没有顺序要求，并空格隔开
                注意：
                    size属性必须要写在position后面，并用/隔开：position/size
                    origin属性必须写在clip属性前面


          */
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            道可道，非常道；名可名，非常名。
            无名，天地之始，有名，万物之母。
            故常无欲，以观其妙，常有欲，以观其徼。
            此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
            道可道，非常道；名可名，非常名。
            无名，天地之始，有名，万物之母。
            故常无欲，以观其妙，常有欲，以观其徼。
            此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
            道可道，非常道；名可名，非常名。
            无名，天地之始，有名，万物之母。
            故常无欲，以观其妙，常有欲，以观其徼。
            此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
        </div>
    </div>
</body>
</html>
代码效果：
Web全栈工程师之路(二)——CSS篇(十二)——背景

猜你喜欢
