css的background其实有很多用法

·  阅读 67
css的background其实有很多用法

听过一些高级人员说,他们面试的时候可以很豪气的跟人说“我CSS不行”,我觉得或许是因为他们不用战斗在开发的一线。对于我们这些工作在前端一线的人员来说,CSS的熟练可以大大加快开发的速度。这也就导致了这篇记录的产生!

1. 前言

首先background是个简写属性。它包含的属性如下:

background-clip、background-color、background-image、background-origin、
background-position、background-repeat、background-size,和 background-attachment
复制代码

在使用简写时,没有先后顺序的区别。

但是有几点需要注意:

1. background-positionbackground-size一起使用

例: center(默认值0% 0%)/contain(默认值auto auto)
复制代码

2. backround-originbackground-clip

对应的值都是content-box, padding-box(默认值), border-box

  1. 如果出现一个,表示两者均对应的该值

2)如果出现两个,前者是backgroud-origin,后者是background-clip

3. 上面4种属性都是针对background-image而言

2. 背景可以有多层(CSS3)

1. 每一层都需要通过,(逗号)分割。

2. 同一层种可以同时存在background-colorbackground-image, background-color位于最下层。

background: border-box content-box center/contain no-repeat url("../../media/examples/lizard.png"),yellow;
复制代码

3. 当存在多层背景时, background-color只能位于最后一层之中。

4. 渐变色如radial-gradient(crimson, skyblue), 属于background-image

5. 背景图在前面的,位于各层背景的上面。

background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),url("../../media/examples/star.png"),35% url("../../media/examples/lizard.png"),radial-gradient(crimson, skyblue);
复制代码

3. 标签也可以使用background属性

正常如果同时给<img />标签设置src属性和background属性时,会同时加载。

如果src的图片含有透明部分,不要设置background属性,因为会露出来。但是如果不存在前面说的情况,background(图片最好是base64)会在图片加载失败的时候显示,这样就避免了大片的空白。

但是仍然会出现默认的破损图片,不美观。具体好的实现方式可以参考这里

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改