CSS3-background扩展属性

作者: 彬_仔 | 来源:发表于2016-10-17 14:48 被阅读637次

CSS3对background新加了3个属性，background-origin、background-clip、background-size,在学习过程中，发现background-origin和background-clip之间可能产生一些化学反应，同时还可能影响background-size的百分比取值，本篇文章将记录一下对background-origin、background-clip和background-size的基本认识。

在开始使用background-origin和background-clip之前，我们先回顾一下盒子模型。
首先盒子模型是由contentBox、paddingBox、borderBox、marginBox四部分组成。其次CSS盒子模型分为两种：标准盒模型和怪异盒模型（IE），其中标准盒模型：

盒子的总宽度/高度 = width/height + paddingBox + borderBox + marginBox = contentBox + paddingBox + borderBox + marginBox

而怪异盒模型：

盒子的总宽度/高度 = width/height + marginBox = contentBox + paddingBox + borderBox + marginBox

另外，在CSS3中引入了box-sizing属性来使开发者根据不同场景规定盒子模型的大小，这一点在移动开发至关重要。

background-clip

clip：剪，剪掉的意思。CSS3中引入background-clip主要是来确定背景的裁剪区域的，也可以理解为背景从盒子模型的那一部分进行展示。
语法：

background-clip: content-box || padding-box || border-box

我们来看一下这几个取值的具体意思：

content-box：盒子模型的背景从content部分的外边缘开始裁剪，使得除了content部分，其以外的背景都不会显示出来。
padding-box：盒子模型的背景从padding部分的外边缘开始裁剪，使得除了padding部分，其以外的背景都不会显示出来。
border-box：盒子模型的背景从border部分的外边缘开始裁剪，使得除了border部分，其以外的背景都不会显示出来。默认值

上面的文字可能不是很清楚，我们来看几张图片：

background-clip不同取值

代码：

    <!--html-->
    <div class="div7">clip:content-box</div>
    <div class="div8">clip:padding-box</div>
    <div class="div9">clip:border-box</div>

    <!--css-->
    div{
        background: #f00;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }

    .div7{
        background-clip: content-box;
    }
    .div8{
        background-clip: padding-box;
    }
    .div9{
        background-clip: border-box;
    }

再来看看图片背景的效果：

background-clip不同取值

代码：

    <!--html-->
    <div class="div7 img">clip:content-box</div>
    <div class="div8 img">clip:padding-box</div>
    <div class="div9 img">clip:border-box</div>
    
    <!--css-->
    div{
        background: #f00;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }
    .img{
        background: url(sourse/day16_img1.jpg) no-repeat;
        color: red;
    }
    .div7{
        background-clip: content-box;
    }
    .div8{
        background-clip: padding-box;
    }
    .div9{
        background-clip: border-box;
        background-origin: border-box;
    }

相信通过上面背景色和图片的例子，应该很容易可以看出background-clip的作用了，就不过多啰嗦了。
<small style="color:#a7a7a7;">注：图片背景的例子和背景色的例子中有点不同，在.div9中，图片的例子多了一句background-origin：border,这是为什么呢？带着这个问题，在本文的下一个主角background-origin中解答。</small>

关于background-clip上面已经介绍完了，但是在webkit内核的浏览器中还有一个关于background-clip好玩的扩展，就是可以给文本设置背景图片。通过设置background-clip:text，并配合其私有属性-webkit-text-fill-color: transparent来实现。

background-clip:text

代码：

    width: 200px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;

webkit总是那么时尚潮流，再比如webkit的box-reflect也是其他浏览器实现起来很复杂的小特效。这些webkit的小特效在使用的时候注意兼容性的问题，在Safari、Chorme和最新版的Opera以及Edge上是没问题的，但是在IE和Firefox就完蛋了。

background-clip使用小例子
Facebook弹出窗口，边框带有透明并能显示底下的内容如下图所示：

Facebook弹出窗口
平时我们制作这样的效果都是靠给弹出层的背景加上opacity属性，并设置一定的padding，但大家都知道opacity会直接影响到其子元素的效果。
现在我们完全可以使用background-clip把元素背景控制在padding或content区域内，这样一来，只需一个盒子。我们在这个盒子上加上透明边框，并配合background-clip把背景超过padding或content的边缘外的背景色直接裁剪掉,具体CSS代码如下：

    .facebook {
        background: #3B5A98;
        border: 20px solid rgba(134,134,134,0.8);
        padding: 10px;
        color: #fff;
        text-align: center;
        width: 150px;
        height: 65px;
        line-height: 65px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        font: bold 25px Airal;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        -o-background-clip: padding-box;
        background-clip: padding-box;
   }

background-origin

origin：起源，原点的意思，通过它的翻译我们可以推断出它的作用是，规定背景的原点，或者说是规定背景在盒子模型中的起始位置（刚学习的时候我也是这样认为的）。
语法：

background-origin: content-box || padding-box || border-box

我们来看一下这几个取值的具体意思（暂时）：

content-box：盒子模型的背景从content部分的左上角开始绘制。
padding-box：盒子模型的背景从padding部分的左上角开始绘制。默认值
border-box：盒子模型的背景从border部分的左上角开始绘制。

我们来看几张图片对比一下：

background-origin

代码：

    <!--html-->
    <div class="div2 img">origin：content-box</div>
    <div class="div3 img">origin：padding-box</div>
    <div class="div4 img">origin：border-box</div>

    <!--css-->
    .img{
        background: url(sourse/day16_img1.jpg) no-repeat;
        color: red;
    }
    .div2{
        background-origin: content-box;
    }
    .div3{
        background-origin: padding-box;
    }
    .div4{
        background-origin: border-box;
    }

通过上面的图片背景，我们好像可以看出背景被background-origin限制绘制起点了，还有一点美中不足就是起点是限制了，但是好像终点并没有被限制，右下角任然进入了外层的盒子（比如background-origin：content-box，起点是从contentx-box的左上角开始绘制的，但是右下角明显进入了paddingBox和borderBox），这个问题不急，在下面解释（好熟悉的赶脚）。

我们再来看一下背景为颜色时候的样子：

background-origin

代码：

    <!--html-->
    <div class="div2">origin：content-box</div>
    <div class="div3">origin：padding-box</div>
    <div class="div4">origin：border-box</div>

    <!--css-->
    .div2{
        background-origin: content-box;
    }
    .div3{
        background-origin: padding-box;
    }
    .div4{
        background-origin: border-box;
    }

这就不对了，什么鬼？怎么都一样，不是设置不同背景起点了吗?
这就是一开始我提到“刚学习的时候我也是这样认为的”，但是通过查资料发现，人家CCS3规定的background-origin是用来管图片起始绘制点的，根本没有颜色背景的事。
OK，问题解决。还记得我们在background-clip中.div9中添加的哪一个background-origin:border-box吗？现在应该知道它是干什么的了吧。
还是再解释一下吧，.div9那个盒子是用来测试background-clip对borderBox的裁剪作用，但是background-clip的默认属性为paddingBox，不设置一下就看不出上面的效果了，成这样了：

background
看到这样的图，根本就无法说明background-clip的作用了。

但是通过这个例子我们可以发现一个问题，就是background-origin和background-clip是相互影响的，有时候你但设置其中一个属性，没有达到你想要的结果，可能就是另一个的默认属性（或者你自定义的）影响了。多多去实验就会发现很多好玩的东西

是不是还有一个问题没解释，就是background-origin的这张图的右下角进入其他盒子的现象。

background-origin

其实我觉着没必要解释了。

background-size

在CSS3之前，我们在使用背景图片的时候会经常遇到下图中的两个问题：

background-size

对于这种问题，background-size的出现就是一个福音，它可以让开发者随意改变引入的背景图片的大小。
语法：

background: auto || length || percentage || cover || contain

我们针对这几个属性在说明一下：

auto：此值为默认值，保持背景图片的原始高度和宽度；
length：此值设置具体的值，可以改变背景图片的大小；
percentage：此值为百分值，可以是0％-100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算（个人认为这种说法有些问题）。
cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；
contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。
当background-size取值为length和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

针对background-size已经有很详细的使用说明了，懒得做图片展示了，很好理解，自己去试试就好了。我想强调的是background-size的百分比取值，因为我发现他受background-origin的影响。

background的origin影响size

按照上面对于background-size取百分比值的说法（网上大部分也这样认为，W3School说的更模糊），是根据图片所在元素的宽度的百分比来计算的，同时我们文章一开始也说明了盒子模型的总宽度（按标准盒模型）可以写成:

width + paddingBox + borderBox + marginBox

所以我们可以理解为background-size设置的百分比的值就是上面公式中的width的百分比，如果一个盒子的width固定，background-size固定，岂不是图片大小就固定了，像下图这样：

background-size

    <!--html-->
    <div></div>

    <!--css-->
    div{
        width: 100px;
        background: url(sourse/day16_img1.jpg) no-repeat;
        background-size: 100%;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }

但是，此时如果我们在设置一下background-origin（clip为默认值），情况就不一样了。

background-origin: border-box:

background-size
background-origin: content-box:

background-size
很明显图片的大小改变了，所以我认为，background-size百分比取值会受background-origin影响。
可能还有人会认为，我这是不是设置background-clip也会影响？回答是肯定的，只不过clip影响的是显示区域，图片大小并没有改变。

总结

通过上面的介绍，我们新认识了CSS3的三个属性background-clip、background-origin、background-size，同时我们发现了他们之间的相互影响。

background-clip用来规定背景（颜色和图片）的展示区域（绘制区域）。
background-origin用来规定背景图片的起始绘制点。
background-size用来规定背景图片的大小。
background-origin会影响background-size的百分比取值。
背景属性可能会相互影响，出现神来之笔的效果，也可能让你抓狂。

本文参考

http://www.w3cplus.com/content/css-background-origin
http://www.w3cplus.com/content/css3-background-clip
http://www.w3cplus.com/content/css3-background-size
http://www.w3school.com.cn/cssref/pr_background-size.asp

CSS3-background扩展属性

background-clip

background-origin

background-size

background的origin影响size

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

程序员

前端杂货铺

前端开发那些事

让前端飞