background图片不显示_css的background属性到底有哪些用法？这篇文章帮你全部总结了！...

点击壹伴助手，关注我们

前言

前几天有些事情所以没有更新，感谢小伙伴们的理解~最近在做项目的时候一直有用到很多background-image的时候，所以有个想法打算总结一下所有的background属性用法，以后用起来也会更加的方便。

background

background属性能够帮助我们为界面的背景进行一些设置。比如背景颜色、背景图片等等，它常见的属性如下：

• background-color

• background-clip

• background-image

• background-repeat

• background-size

• background-position

• background-origin

• background-attachment

1. background-color最常见的就是background-color值，它表示背景的颜色值；background-color可能取值有很多种：十六进制颜色值如#000000、指定颜色名称的值如red、rgb代码的颜色值如rgb(0, 0, 0)、注意现代浏览器还可以是rgba代码的颜色值如rgba(0, 0, 0, 0.5)，上面的a表示alpha值。也就是alpha通道，用于背景颜色的透明度。如果还不理解的，可以来看下面的例子，假设我们现在有三个div如下：

class="bg-item bg-color-1">背景一

class="bg-item bg-color-2">背景二

class="bg-item bg-color-3">背景三

给元素简单添加点样式，并且添加背景颜色值

<style>      .bg-item {          text-align: center;          width: 800px;          height: 200px;      }      .bg-color-1 {          background-color: greenyellow;      }      .bg-color-2 {          background-color: #ff5500;      }      .bg-color-3 {          background-color: rgb(0, 255, 255);      }style>

上面分别是添加了颜色名称、十六进制值、rgb颜色值的属性，效果如下：

下面是rgba的例子：

<style>  .bg-color-4 {      color: #fff;      background-color: rgba(0, 0, 0, 0.3);  }style><div class="bg-item bg-color-4">背景四div>

效果如下所示

可以看到，背景四有一部分透明的效果，rgba中的a可以简单理解成透明度，但是它跟opacity不一样的地方在于，rgba的alpha不会影响元素上面的文字等等内容，而opacity则会使得元素上面所有的内容都变得透明。

还是来看实际例子比较直观

<style>  .bg-opaticy {      color: #fff;      font-size: 30px;      font-weight: bold;      background-color: #000;      opacity: 0.3;  }  .bg-alpha {      font-size: 30px;      color: #fff;      font-weight: bold;      background-color: rgba(0, 0, 0, 0.3);  }style><div class="bg-item bg-opaticy">透明--opaticydiv><div class="bg-item bg-alpha">透明--alphadiv>

所以当我们想要让背景有一些透明效果而不想影响元素上方的文字时，可以使用alpha，但是rgba属性有兼容性问题，ie低版本基本上不支持，所以用的时候要注意。

2. background-clip

这个属性可能对于很多人比较陌生，实际上也是很有用的一个属性。

它主要是用来指定背景绘制的区域，它有三个可选值：

• border-box，背景被裁剪到边框盒。

• padding-box，背景被裁剪到内边距框。

• content-box，背景被裁剪到内容框。

来看实际例子

  .bg-clip-demo {      padding: 20px;      width: 500px;      height: 300px;      border: 10px solid #00ff00;      border-bottom: 10px solid transparent;      background-color: cyan;      background-clip: border-box;  }  .bg-clip-content {      text-align: center;      width: 500px;      height: 300px;      line-height: 280px;      color: #fff;      background-color: teal;  }</style>

这里是内容区域div>div>

第一个例子是最常见的，background-clip为默认值border-box，所以背景会延伸到border区域；这里设置了border-bottom的背景是transprent，也就是透明，所以可以看到background的颜色。下面修改一下background-clip为padding-box，其他不变：

background-clip: padding-box;

第二个例子注意最下方的边框位置，空出的一块就是透明的border-bottom，因为现在background只延伸到padding区域，所以说border区域就没有background颜色了。最后，我们试一下第三个属性：content-box

background-clip: content-box;

这时候发现背景只能延伸到内容区域了，因此当我们希望背景颜色不要把内容全部占据的时候，可以尝试一下background-clip属性；

3. background-image

关于背景图片属性，我打算跟剩下的所有background属性一起讲，因为剩下的属性都是为background-image属性服务的。

首先来看background-image，它表示用图片做背景，接受一个url属性值，用于读取要用作背景的图片地址，还是先看例子：

  .bg-image-demo {      width: 100%;      height: 800px;      background-color: pink;      background-image: url('./032.jpg');  }</style>

div>

可以看到，这里成功将图片用作了背景图片，但是很奇怪的是，我们看到背景图片重复了很多张，为什么会这样呢？

css的背景图片，如果你没有特别声明的话，将会用图片原本的宽高来填充背景，如果没有填充满，则会重复平铺直到占满元素；那么当你不想要图片平铺的话有什么办法呢？答案就是使用background-repeat属性；

3. background-repeat

上面我们讲到这是用来设置背景图片重复与否的，它可以接受的值有两个：

repeat，表示一直重复平铺图片；

no-repeat，表示不重复图片；

repeat-x，表示水平方向重复平铺图片；

repeat-y，表示垂直方向重复平铺图片；

inherit，表示从父元素继承repeat值；

上面例子使用的就是默认的repeat值，所以会一直平铺图片，下面来给元素增加background-repeat属性看下效果(其他代码不变)：

background-repeat: repeat-x;

这时候背景图片只会在水平方向平铺，还是使用的图片原来大小，所以下方就能看到元素设置的背景颜色，再试一下repeat-y属性：

background-repeat: repeat-y;

这次变成了垂直方向平铺背景图片，而右侧则展示原来的背景颜色；最后我们看下no-repeat属性：

background-repeat: no-repeat;

是不是瞬间清爽了！

但是问题来了，如果想要让图片占满背景区域，又不想平铺图片怎么办？放心，你能想到的前人基本都替我们想好了，下一个属性就是帮我们做这个事情的：background-size；

4. background-size

这个属性就是用来指定背景图片的大小的，但是注意有兼容性问题：IE8以下不支持该属性；background-size可以接受四种类型的值：

length，接受两个值，分别表示背景图片的宽高，如果第二个值省略则设置为auto；

percent，接受两个值，分别表示以父元素的百分比值设置宽高，如果第二个值省略则设置为auto；

cover，表示把背景图片扩展到足够大，以使背景图片完全覆盖背景区域，但是可能导致图片部分内容不展示出来；

contain，同样表示把背景图片扩展到足够大，使其宽度和高度完全适应内容区域；

直接看上面最后一个例子：

<style>  .bg-image-demo {      width: 100%;      height: 800px;      background-color: pink;      background-image: url('./032.jpg');      background-repeat: no-repeat;  }style><div class="bg-image-demo">div>

在这个基础上，我们设置background-size属性来改变背景图片的大小；首先来看第一个length属性：

background-size: 800px 800px;

可以看到背景被拉伸成800*800的大小了，下面试一下percent值：

background-size: 50% 50%;

这里看到背景图片宽高大小都是以元素本身宽高大小的百分比来计算的；

这里补充一点，只要length或者percent的第二个值没有设置，则会被设置成auto，也就是会使用原图的长宽比，如果不理解的话可以看下下面的例子：

background-size: 50%;

上面就是宽度占据了元素的50%，而高度则根据原图的长宽比进行了缩放，也就是不会被拉伸；下面是比较常用的background-size: contain

background-size: contain;

上面看到宽度占据了整个元素，然后高度保持原来的长宽比，所以如果你想要用contain来使得背景元素占满空间的话，要先把元素宽高设置成跟图片宽高一致；

下面是background-size: cover;

background-size: cover;

看起来这个也占满了元素，但是要注意的是，cover会使得图片部分内容没有展示出来，上述图片就被裁剪掉了一部分；

5.background-positon

下面介绍的属性是background-position，它是用来修改背景图片的位置的，它接受三种方式的值：

top|right|bottom|left，可以传递两个不同的值，分别表示水平和垂直方向的位置，如果第二个值不传，则默认为center；

percent，同样接受两个值，分别表示水平和垂直方向的位置，这个值也是以父元素来计算的；如果第二个值不传，默认为50%；

px，接收两个值，以px值来表示水平和垂直的位置，第二个值不传则默认为50%；

我们来简单过一下这些值(以下样式的background-size均为50%)

background-position: 20px;

background-position: 20px 20px;

background-position: 80%;

background-position: 80% 80%;

background-position: top;

background-position: right;

background-position: left bottom;

6.background-origin

我们来看下一个属性，background-origin；按照它的名字，很容易猜想出来，这也是一个跟背景图片位置有关的，但是我们已经有了background-position属性了，那么这个是干嘛的呢？

W3C的官方解释如下：

background-origin 属性规定 background-position 属性相对于什么位置来定位。

https://www.w3school.com.cn

很显然，这个用来控制background-position位置的属性；它接受下面的值：padding-box|border-box|content-box

我们结合上面讲过的属性：background-clip，可以很容易就理解上面三个值代表的意思，下面我们直接看下例子：

首先使用background-origin默认属性：padding-box的时候：

  .bg-image-demo {      padding: 20px;      height: 800px;      border: 20px solid transparent;      background-color: pink;      background-image: url('./032.jpg');      background-repeat: no-repeat;      background-size: 50%;      background-position: 0 0;      background-origin: padding-box;   }  .bg-image-content {      text-align: center;      width: 400px;      height: 400px;      line-height: 400px;      background-color: rgba(0, 0, 0, 0.3);  }</style>

这里是内容div>div>

这里稍微解释一下，粉色的是背景，然后有10px长度的透明边框，然后背景图片因为设置了padding-box所以不是以border为原点，因此呈现图中的样式；下面修改一下background-origin属性为border-box：

background-origin: border-box;

这时候就很明显背景图片是以border为原点的了，最后再尝试下最后的content-box：

background-origin: content-box;

背景图片以内容为原点进行展示；

6.background-attachment

终于到了我们最后的一个属性：background-attachment；

这个属性很好理解，它接收的值有：fixed|scroll|inherit，scroll表示背景图片会随着内容滚动而滚动，fixed表示背景图片不会随内容滚动而滚动，inherit则是表示继承父元素的background-attachment属性；来看例子：

<style>  body { background-color: pink; background-image: url('./032.jpg'); background-repeat: no-repeat; background-size: 60%; background-position: 0 0; background-origin: content-box; background-attachment: scroll; } style>  <body>  <div>以下是会跟随页面滚动的内容div>     <div>中元日芽香div>     <div>黑莓糖beam~~~~div>     <div>前端充电营div>     <div>欧小白！div>     // ...body>

将background-attachment修改为fixed，则背景图片不会再跟随页面滚动而滚动：

background-attachment: fixed;

至此，background-image相关的属性就介绍完了；

最后，补充一点就是，可以直接用background属性来填写所有的background-image相关属性，除了background-size(虽然W3C标准上写了也可以包含background-size，但是实际写上去页面会出错，有知道具体原因的同学可以留言给我);

<style>.bg-image-demo { padding: 20px; height: 800px; border: 20px solid transparent; background: url('./032.jpg') no-repeat 0 0 border-box padding-box pink; background-size: 80%;}style><div class="bg-image-demo">div>

好啦，以上就是background的全部知识点啦！用得上的小伙伴可以收藏起来，以后碰到疑问只需要翻一翻这篇文章就可以了~

最后感谢小伙伴的阅读，我们下一篇再见！

关注【前端充电营】

回复【电子书】

获取100+

技术书籍！

前端也能轻松年薪20w+？超详细前端入门攻略拿去！

都0202年了，你还不知道javascript有几种继承方式？

简单而面试中又常见的知识点：JS执行机制

点“在看”你懂得