你真的熟悉background吗？

最新推荐文章于 2025-04-16 21:37:53 发布

转载最新推荐文章于 2025-04-16 21:37:53 发布 · 187 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moqing/p/5831244.html

一两个月没更新博客了，因为放假刚在深圳找了实习，一直都比较忙碌，不过我觉得再忙，还是需要时间去沉淀一些东西，工作的时候别人看到的只是你有没有实现最终的结果，但自己是否思考，是否去总结，决定着你工作是否轻松。基础不好的话，很多时候时间都花费在修复各种bug上了。所以思考总结很重要，做出好维护的代码才能让我们轻松走天下。找实习还是比较顺利的，有空可以分享下经验。好了，进入正题了，今天分享的是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揭秘》，发现它还是很有用的。这本书也不错，可以买来看看。

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

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

   border: 10px solid rgba(0,0,0,0.2);
   width: 200px;
   height: 200px;
   background: #16ff00;
  padding：10px；//测试需要

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

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

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

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

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

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

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

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

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

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

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

    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等情况下的表现，应该一看就懂吧。至于平常能不能用到，就要看业务了。