码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-04-27 17:55:34      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:enter   就是   默认   type   溢出   默认值   meta   content   ima   

 

<!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篇(十二)——背景

标签:enter   就是   默认   type   溢出   默认值   meta   content   ima   

原文地址:https://www.cnblogs.com/lyrebirth-world/p/12787654.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!