首页 > > 网页制作 > css >

background属性的学习整理转述

2018-06-24 01:02:12来源：未知阅读 ()

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　background我们一般用到的的属性有：

background-attachment：背景（图片）是否随页面滚动；
background-origin：背景（图片）的位置的原点（图片位置从哪开始）;
background-color：背景颜色；
background-image：背景图片；
background-clip：背景（图片和背景色）的可视区域（有一部分被裁剪掉）；
background-position：背景（图片）的位置；
background-size：背景（图片）大小；
background-repeat：是否重复背景图片；

　　这些属性可以全部合并成一个缩写格式，background : attachment origin color image clip position/size repeat ；

　　background缩写谨记：

如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size；如果你只想设置size，不设置position，方法就是写成0 0/size ，是两个0哦；如果只写了一个0，那么垂直位置默认为center；如果两个0都不写，那么浏览器就会把size值当成position值，然后就没有size值了;
clip默认是border-box，origin默认是padding-box；都可设置border-box | padding-box | content-box；当缩写中只出现一个值时，clip和origin都会变成这个值；如果设置了两个不同的值，那么前者是origin（位置原点），后者是clip（图片裁剪）；

　　背景颜色background-color默认是占据padding和border区域的，不占margin；背景图片background-image默认位置是从padding开始，不占border；IE6/7，background没有占据border；

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 200px;
                height: 80px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                background: #f60;
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

View Code

1. background-attachment

　　页面滚动时，图片的状态，默认scroll，跟随页面一起滚动；

background-attachment:scroll; 默认值，跟随页面滚动；
background-attachment:fixed; background-position相对浏览器固定，不随页面滚动；

　　首先我们需要了解页面（page）和视口（view port）的概念，视口（view port）是浏览器显示网页的部分，位置固定，不会动；

　　当向下滚动页面时，视口（view port）不动，页面向上滚动。看起来像是视口（view port）向下滚动，这是默认值scroll的效果；

　　但是当background-attachment设置fixed，页面滚动时，背景要待在它原来的位置（background-position相对于浏览器），也就是不随元素滚动；

　　重点是背景图只出现在元素可见的区域，如果它的元素看不见了，背景图也消失；当我们向上或向下滚动页面时，只要元素还能在视口（view port）看到，哪怕一点点，只有1px，背景图都还会显示；

　　我们可以利用这个属性做出视差滚动的效果；

2. background-origin

　　背景（图片）的位置的参考区域，可以改变原点（背景图片位置从哪开始计算），这个属性和background-position配合使用；

　　background-origin默认为padding-box，可设置为border-box | padding-box | content-box；

　　仔细看background-position：0 0;的位置；

默认padding-box: border-box: content-box:

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 100px;
                height: 100px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #f60;
                background: #0f0 url(images/1.jpg) no-repeat 0 0/100px padding-box padding-box;
                /*clip默认都是border-box;可设置border-box | padding-box | content-box*/
                /*origin默认是padding-box;可设置border-box | padding-box | content-box*/
                /*如果缩写中只出现一个值时，clip和origin都会变成这个值*/
                /*如果设置了两个不同的值，那么前者是origin（位置原点），后者是clip（图片裁剪）*/
                /*仔细看position：0 0 的位置哦*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

View Code

3. background-color

　　有多种方式设置颜色：

red，green，....
rgba(0,0,0,0.6)；最后一个0.6是不透明度的意思，数值为0到1之间，0为全透明，1为不透明；
#ff0033；可以写成#f03；
也可以设置transparent，透明

4.1 background-image

　　background-image:url(images/pic.jpg); 注意路径要写对；

　　可以和background-color连用，如果图片不重复的话，图片没有占据的地方将被颜色占据；

4.2 多重背景

　　css3中，可以对一个元素应用多个图片作为背景，代码用逗号隔开；第一个出现在元素顶部，后面的按顺序排列；

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                background: url(images/1.jpg)  80% 40%/150px 200px no-repeat , url(images/xiaoxin.gif) 20px bottom/ 100px  no-repeat;
                /*一个元素可以设置多个图片同时作为背景，中间用逗号隔开*/
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*如果background-size可以设2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
                background-color: #f60;
                /*这个时候如果还想要背景色，就必须单独设置了*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

View Code

5. background-clip

　　背景（图片和背景色）的可视区域（有一部分看不见，被裁剪掉了）；

　　background-clip默认是border-box，可设置padding-box | content-box；

　　background-origin默认是padding-box;

默认border-box: padding-box: content-box

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 100px;
                height: 100px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #f60;
                background: #0f0 url(images/1.jpg) no-repeat 0 0/100px padding-box padding-box;
                /*clip默认都是border-box;可设置border-box | padding-box | content-box*/
                /*origin默认是padding-box;可设置border-box | padding-box | content-box*/
                /*如果缩写中只出现一个值时，clip和origin都会变成这个值*/
                /*如果设置了两个不同的值，那么前者是origin（位置基值），后者是clip（图片裁剪）*/
                /*仔细看position：0 0 的位置哦*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

View Code

6. background-position

　　背景图片的位置，指的是图片左上角相对于原点（元素左上角）的位置；

　　如果background-origin是默认值，那么原点位置是在padiing左上角；

　　可以设置1或2个值，分别是水平位置和垂直位置，如果只有一个值，第二个值默认为"center"；

background-position:0 0 ; 默认值，原点，元素左上角；
background-position:30px -50px; 向右和向下时正值，向左和向上是负值；
background-position:left bottom; 可以设置left/center/right，top/center/bottom；
background-position:60% 10%; 将图片百分比位置的点和元素百分比位置的点对齐；

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
                background:#f60 url(images/1.jpg)  80% 35px/150px  no-repeat;
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/
                /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/
                /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

View Code

7. background-size

　　背景图片的大小，可以设置：contain | cover | 百分比数值 | 单位数值

background-size：单位数值；可以设置1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放；

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
                background:#f60 url(images/1.jpg)  80% 35px/150px  no-repeat;
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/
                /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/
                /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
                /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

View Code

background-size：百分比数值；是基于包含元素的尺寸的；可以设置1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
                background:#f60 url(images/1.jpg)  80% 35px/30% 60% no-repeat;
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/
                /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/
                /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
                /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

View Code

background-size：contain；背景图等比缩放，将图片完全显示在背景区域内；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分背景区域留白；

　　　　注意看边框区域

　　　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 250px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
                background:#f60 url(images/1.jpg) center/contain no-repeat;
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/
                /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/
                /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
                /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/
                /*background-size:contain; 背景图等比缩放，将图片完全显示在背景区域内；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分背景区域留白*/
                /*background-size:cover; 背景图等比缩放，铺满整个背景区域，宽度或者高度超过背景区域大小；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分不在背景区域内（被剪切掉了）*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

View Code

background-size：cover；背景图等比缩放，铺满整个背景区域，宽度或者高度超过背景区域大小；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分不在背景区域内（被剪切掉了）；

　　　注意看边框区域

　　　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 250px;
                height: 200px;
                margin: 100px;
                padding: 30px;
                border: 10px dashed #0ff;
                /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
                background:#f60 url(images/1.jpg) center/cover no-repeat;
                /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/
                /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/
                /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/
                /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/
                /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/
                /*background-size:contain; 背景图等比缩放，将图片完全显示在背景区域内；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分背景区域留白*/
                /*background-size:cover; 背景图等比缩放，铺满整个背景区域，宽度或者高度超过背景区域大小；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分不在背景区域内（被剪切掉了）*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>