你真的熟悉background吗？（转）

    写的很好，记录一下，css中的background，平常我们用的都是些常见的属性，今天来看看一些不常用的，其实还是很有价值的。

  我们都知道background是一个复合属性，我们先来大概看看这些单一属性。

*   background-color
*   background-position
*   background-size
*   background-repeat
*   background-origin
*   background-clip
*   background-attachment
*   background-image

大部分其实都是比较简单的，今天主要分享下background-size，background-origin，background-clip。其他的可以自行查阅

1 background-size：水平方向 垂直方向，做移动端的时候经常需要用到这个。

属性值分别有：

1 设置具体的值 。background-size：100px 200px。你设置的多大 背景图片就有多大，当只设置一个值的时候高度会auto。

2 设置百分数 。background-size：100% 100% ，图片的宽高 会以容器的宽度为基准，来生成大小。当只设置一个值的时候，高度的值会默认为auto。但不一定会正好就等于图片的高度显示出来，我之前做一个移动端就是因为我设置的是background-size：100% ，后来发现背景图片的高度只显示了一部分，底部的就是看不到，但我们底部的背景又是需要展现出来的，后来改成background-size：100% 100%就好了。当然如果你的背景的重点不在下面。可以只写一个100%。

3 background-size： cover，这个就是不会考虑图片本身的比例，让图片能够把容器充满，所以很有可能图像只显示一部分，因此还是要根据你的需求来看。

如果你需要显示完整的图片，最好用background-size：100% 100%，如果图片的重点在上面，或者只显示一部分也没影响，可以用background-size：100% 和background-size： cover。

4 background-size： contain 把图像图像扩展至最大尺寸一直到。他们的宽度和高度都能接触到容器。

建议大家私下都动手试试，区别很明显。

2 background-clip：以前很少用这个属性，最近看翻译成中文的《CSS揭秘》，发现它还是很有用的。这本书也不错，可以买来看看。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">background-clip: border-box|padding-box|content-box;</pre>

有三种值，分别是什么呢，先跟着我来看一个例子，假设我们现在要做一个透明的边框。我们可能会这样写

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"> border: 10px solid rgba(0,0,0,0.2);
   width: 200px;
   height: 200px;
   background: #16ff00;
  padding：10px；//测试需要 </pre>

可是看效果，发现并不是我们想象中的样子，如下，我们会发现边框实际上是在背景上面的，这是什么原因呢？

image

这不是一个bug,而是本来就是这样子，CSS2中语法规定了背景的渲染模式。就是通过background-clip这个属性来规定的：

1 默认值是border-box,意思就是背景是从边框开始绘制的，也就是背景的颜色会包括border+padding+content,（content指的是内容区域），所以下面的背景才包括了边框。

2 当设置值为padding-box的时候,背景会从padding开始绘制，也就是包括padding+content，

3 设置值为content-box，背景颜色就只包括content了。

OK，那如果我们想实现透明边框，就让背景不会从边框绘制就好了。如下，两个属性值都实现了，只是第二个背景只包括内容，所以中间的padding就不会有背景了。大家可以记住这个特性，以很可能会用到。

image image

3 background-origin：这个属性呢，经常会与上面一个属性混淆，但其实不是一个东西，background-position这个属性大家都熟悉吧，规定背景显示的位置，但是位置总要有个标准来确定吧。这个标准呢，就是由background-origin这个属性来规定的，有下面三个值，原理跟上面是差不多。也有三个值。

padding-box：默认值。意思就是以padding开始为标准定位。

border-box:以padding开始为标准定位。

content-box:以内容区域为标准定位。

我们来看一个实际的效果，代码如下：

[ 复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"> width: 200px;
    height: 200px;
    background: url(li-ai-jun.png) no-repeat;
    padding: 25px;
    border: 10px dotted #000000;
    background-repeat: no-repeat;
    background-size: 100%;

如下，分别是默认情况，border-box，content-box等情况下的表现，应该一看就懂吧。至于平常能不能用到，就要看业务了。</pre>

[ 复制代码

](javascript:void(0); "复制代码")

image image image
转载原文：https://www.cnblogs.com/moqing/p/5831244.html