CSS——background属性

作者: DHFE | 来源:发表于2017-11-25 00:18 被阅读174次

CSS3 背景
CSS属性参考手册
CSS -- background
css background的多种属性详解
CSS3背景
Tailwind Background
CSS3背景裁切属性——background-clip
CSS基本属性
前端开发学习第二十六天
CSS背景图

background是CSS的简写属性，包含了数个属性集。其可以用来设置一个或多个属性：

- background-color
- background-image
- background-position
- background-repeat
- background-size
- background-attachment

有一些我们是很熟悉的，比如b-color、b-image等，也有生疏的如b-attachment。这篇文章就浅显的整体了解一下这个CSS属性。

background-color

MDN——background-color

初始值：background-color: transparent;

定义：CSS属性中的background-color会设置元素的背景色，属性的值为颜色值或关键字“transparent”，二者选其一。

是否继承属性：否

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin-top: 10px;
                width: 80px;
                height: 50px;
            }
            .a {
                background-color: red;
            }
            .b {
                background-color: #bbff00;
            }
            .c {
                background-color: rgb(255,255,128)
            }
            .d {
                background-color: hsla(50,33%,25%,0.75);
                /*Hue(色调) Saturation(饱和度) lightness(亮度) Alpha(透明度)*/
            }
            .e {
                background-color: transparent;
                border: solid 1px black;
            }
            
            /*Special keyword values*/
            .f {
                background-color: currentcolor;
            }
            .g {
                border: solid 1px black;
            }
            /*继承*/
            .Inherit {
                width: 200px;
                height: 50px;
                background-color: orange;
            }
            .test {
                width: 50px;
                height: 50px;
                background-color: inherit;
                border: solid 1px red;
            }
        </style>
    </head>
    <body>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e">transprent</div>
        <div class="f"></div>
        <div class="Inherit">
            <div class="test"></div>
        </div>
    </body>
</html>

代码呈现所示

这里要注意一个very special的keyword：

background-color: currentColor;

引用张鑫旭大神的文章：currentColor-CSS3超高校级好用CSS变量

CSS currentColor变量的使用

MDN链接——currentColor

currentColor

关键字代表原始的属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

它也能用于那些继承了元素的属性计算值的属性，相当于在这些元素上使用inherit关键字，如果这些元素有该关键字的话。
————MDN

background-image

MDN——background-image

image属性用于为一个元素设置一个或者多个背景图像。图像在绘制时，以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。
然后元素的borders会在它们之上被绘制，而background-color会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip和background-origin中定义。
如果一个图像无法被绘制（比如，URL表示的文件无法被加载），浏览器会将此情况等同于其值被设定为none。
——————MDN

是否继承：否

MDN的话翻译成“人话”（其实很严谨2333）就是：

如果存在多个background-image，则先指定的会排在后指定的前面。
border的绘制在image和URL之上。
color只有在image出现问题的时候，才会用上。（比如image url error）

PS：新发现，假设此时有主副两个background-image，且也有background-color，如果主image出现错误，导致主背景image无法显示，并不会切换至副image，此时等同于background-image: none;，所以会直接显示background-color，注意（其实这也是MDN定义中的一句话）。

一个栗子

background-size

MDN——background-size

设置图片大小，主要注意单位。

background-size: cover;

cover代码所示

cover

background-size: contain;

contain

contain代码所示

可以看到，容器尺寸不变，但是图片缩小了。按照MDN解释，应是在原图片比例不变情况下，填充容器，因为默认是repeat的，所以余下部分重复填充。

关键词：比例不变

background-size: auto;

这也是默认情况下的值，这里就略过吧。

background-size: /*一个值*/

当值有且只有一个时，表示图片的宽度，图片的高度隐式的为auto。

        <style>
            .container {
                width: 300px;
                height: 300px;
                border: solid 1px red;
                background-image: url(img/1.jpg);
                background-repeat: no-repeat;
            }
            .b {
                background-size: 50%;
            }
            .c {
                background-size: 3em;
            }
            .d {
                background-size: 12px;
            }
            .f {
                background-size: auto;
            }
        </style>
    </head>
    <body>
        <div class="b container"></div>
        <div class="c container"></div>
        <div class="d container"></div>
        <div class="f container"></div>
    </body>

代码如图所示
PS：.f的蓝色是原图的左上角

background-size: /*两个值*/;

第一个值指定图片的宽度，第二个值指定图片的高度

        <style>
            .container {
                width: 300px;
                height: 300px;
                border: solid 1px red;
                background-image: url(img/1.jpg);
                background-repeat: no-repeat;
            }
            .b {
                background-size: auto 50%;
            }
            .c {
                background-size: 50% auto;
            }
            .d {
                background-size: 3em 25%;
            }
            .f {
                background-size: 25% 3em;
            }
        </style>
    </head>
    <body>
        <div class="b container"></div>
        <div class="c container"></div>
        <div class="d container"></div>
        <div class="f container"></div>
    </body>

栗子

background-size: /*逗号分隔的多个值：设置多重背景*/;

        <style>
            .container {
                width: 600px;
                height: 600px;
                border: solid 1px red;
                background-image: url(img/1.jpg),url(img/5.jpg),url(img/7.jpg);
                background-repeat: no-repeat;
            }
            .b {
                background-size: 25%,50%,70%;
            }
            .c {
                background-size: 50% 100%,100% 50%,100% 100%;
            }
        </style>
    </head>
    <body>
        <div class="b container"></div>
        <div class="c container"></div>
        <!--<div class="d container"></div>
        <div class="f container"></div>-->
    </body>

代码所示

css3实现一个div设置多张背景图片及background-image属性

background-repeat

background-repeat

CSS
MDN——background-repeat

属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

来自MDN

repeat

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .universal {
                width: 200px;
                height: 200px;

                background-size: 70px 70px;
                background-image: url(img/7.jpg);
                margin-top: 10px;
            }
            .a {
                background-repeat: repeat-x;
                /*图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话*/
            }
            .b {
                background-repeat: repeat-y;
            }
        </style>
    </head>
    <body>
        <div class="a universal"></div>
        <div class="b universal"></div>
    </body>
</html>

repeat单值栗子

如果容器恰好合适图片重复的尺寸则没啥问题，不合适的话，最后的重复图片会被裁剪。最后一张图于是被裁剪了10像素，变为60像素，于是200px=70px*2+60px.

space

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .universal {
                width: 200px;
                height: 200px;

                background-size: 70px 70px;
                background-image: url(img/7.jpg);
                margin-top: 10px;
            }
            .a {
                background-repeat: space;
            }
            .b {
                background-repeat: repeat-x space;
            }
            .c {
                background-repeat: space repeat-y;
            }
        </style>
    </head>
    <body>
        <div class="a universal"></div>
        <div class="b universal"></div>
        <div class="c universal"></div>
    </body>
</html>

space栗子

对于space属性值，背景图片会现在容器头和尾放置图片，再根据头尾之间空隙来插入图片。

round

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .universal {
                width: 200px;
                height: 200px;

                background-size: 70px 70px;
                background-image: url(img/7.jpg);
                margin-top: 10px;
            }
            .b {
                background-repeat: round repeat-x: ;;
            }
            .c {
                background-size: 80px 80px;
                background-repeat: round no-repeat;
            }
            .d {
                background-size: 80px 80px;
                background-repeat: repeat-x repeat-y;
            }
        </style>
    </head>
    <body>
        <div class="b universal"></div>
        <div class="c universal"></div>
        <div class="d universal"></div>
    </body>
</html>

round

主要在图片是怎么被压缩的，规则是什么。

no-repeat

图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由

code略

background-origin

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin-top: 10px;
            }
            .b {
                background-repeat: no-repeat;
                background-image: url(img/test.jpg);
                width: 200px;
                height: 200px;
                border: dashed 10px red;
                background-origin: border-box;
            }
            .c {
                background-repeat: no-repeat;
                background-image: url(img/test.jpg);
                width: 200px;
                height: 200px;
                border: dashed 10px red;
                background-origin: content-box;
                padding: 50px;
            }           
            .d {
                background-repeat: no-repeat;
                background-image: url(img/test.jpg);
                width: 200px;
                height: 200px;
                border: dashed 10px red;
                background-origin: padding-box;
                padding: 50px;
            }           
            .e {
                width: 200px;
                height: 200px;
                border: dashed 10px red;
                background-color: orange;
                
            }           
        </style>
    </head>
    <body>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </body>
</html>

关于background-clip和background-origin的关系可以看看这篇文章：

无双：css3属性中background-clip与background-origin的用法释疑

background-attachment

如果指定了background-image ，那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。
background-attachment

fixed

此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

代码略

此种背景固定方式经常用于图版率较高的页面设计中，很多大公司如Apple等，在产品展示页就是采用这种设计。

scroll

此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）

代码略

代码就不放了，乱七八糟的。
scroll就是默认情况下的设置，背景图随着元素的滚动而滚动，这样可以给背景图片一个很高的高度，充当BGI，也是一种很正常的使用方法。

这里有一点要注意：

background-attachment:local

background-attachment:scroll

对于元素本身可以滚动的情况下，取值local和scroll情况各有不同。
local：滚动时，背景会随元素滚动而滚动。
scroll：滚动时，背景不会随元素滚动而滚动。

local

此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

这就是上面提到的了。

这里略过。

CSS3 背景
CSS3 背景 CSS3 background-origin 属性 background-origin 属性规定背...
CSS属性参考手册
CSS3 动画属性（Animation） CSS 背景属性（Background） CSS 边框属性（Border...
CSS -- background
background 属性用来设置元素的背景 CSS1 中的background属性链接: background-...
css background的多种属性详解
css的background属性由以下属性组成： background-color：背景色 background-...
CSS3背景
CSS3 background-size 属性 background-size 属性规定背景图片的尺寸。在 CSS...
Tailwind Background
背景滚动（background attachment） CSS提供的background-attachment属性...
CSS3背景裁切属性——background-clip
CSS中的background属性想必大家已经用了无数遍，但是对于CSS3属性background-clip你可能...
CSS基本属性
CSS基本属性背景属性 background-color background-imageURL()插入图片链接...
前端开发学习第二十六天
1.background-image属性在css中，background-image属性是控制元素的必选属性，它...
CSS背景图
css背景图涉及的css属性 background-image background-repeat 默认情况下，...