时间:2021-07-01 10:21:17 帮助过:17人阅读
background 属性是CSS中用于设置元素背景的属性,最简单的background属性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。而不用图片的话,最早的background只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。
background-color是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。
background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。
CSS渐变分成两种,linear-gradient()的线性渐变和radial-gradient()的径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭,所以用的人较少,还是倾向于使用图片,现在各个浏览器的显示和实现已经基本趋向于一致,而且在手机端也有比较好的实现,在移动端开发完全可以广泛使用了(但是在兼容IE9-的时候还是╮(╯_╰)╭),下面是详细介绍,也可以用 生成器 来搞定啦。
线性渐变:linear-gradient(,
radial-gradient([ [
我本想把这个语法简写一下的…减来简去发现还是这么写就好了(毕竟人家规范就是这么写的,果然深思熟虑过)…从后往前说
尺寸另外还有4个关键字可用:closest-side(最近的边)、farthest-side(最远的边)、closest-corner(最近的角)、farthest-corner(最远的角),这4个关键字是指圆心相对于元素而言的,顾名思义想一下就好。
比如如下三行代码,就是等价的:
radial-gradient(yellow, green);radial-gradient(ellipse at center, yellow 0%, green 100%);radial-gradient(farthest-corner at 50% 50%, yellow, green);
重复渐变:repeating-linear-gradient()和repeating-radial-gradient()
用法同上,只是这回是重复渐变了而已。 这里 有一些很漂亮的Demo,当然它主要是为展示background-blend-mode属性建立的。
background-repead用于设置背景的重复方式,可选值有下面几种:
background-attachment用于设置背景相对的固定方式,可选值有:
background-positon,顾名思义就是用来定位的…但是这个定位吧…语法很复杂(或者说很随意)。可用的各种指示方向的关键字,也可以用数字单位或者百分比,写法有下面几种:
background-clip是设定背景所覆盖的范围的属性。可选值有:
background-origin指定了背景图片定位的原点。属性取值与background-clip相同,但是clip是会对背景图片进行裁切,而origin是用于定位的。
可以看这个 Demo ,展现得比较清晰了。
background-size用来设置背景尺寸,可选值有:
background是上面8个属性的总和…可以把所有属性写在一起。顺序不限,以空格隔开即可,但有几个需要注意的点:
从CSS3时代开始,CSS背景开始支持多个背景图,设置在一起了。
只要将每张背景图以逗号分开,那么浏览器就会依次加载,并把写在后面的叠在上面。
对于分开设置的背景属性,也可以以逗号分隔,分别设置。但是如果,你只想设置其中某一张图片的特定属性,那你就得把其他的也都写上才行…
以及,背景颜色是唯一的(摊手),在使用background简写的时候,背景颜色要设置在最后一个逗号之后。
还有,在去年最新的 Compositing and Blending 草案中,提出了混合模式的规范草案,涉及到背景的属性是background-blend-mode,于本文成文时,只有Chrome和FF两大浏览器支持这一属性。
如果各位有玩过Photoshop的话,应该会对Photoshop中的混合模式有所耳闻,二者意思差不多。background-blend-mode的可选参数包括:normal(普通),multiply(正片叠底),screen(滤色),overlay(叠加),darken(变暗),lighten(变亮),color-dodge(颜色减淡),color-burn(颜色加深),hard-light(强光),soft-light(柔光),difference(差值),exclusion(排除),hue(色相),saturation(饱和度),color(颜色),luminosity(明度)。
这些参数的中文都是我根据Photoshop的混合模式直接翻译过来的(繁体用户可以参考 这里 ),规范草案中也给出了每种混合模式的算法和演示效果,因为时间问题我就不一一验证效果了,如果有出入均以实际效果为准。MDN上有实际演示的 Demo ,我前面提到的那个 网站 也有很多实际的展示。
当然这些混合模式也可以应用在其他图像(比如SVG)上,我觉得这完全是为了让那些设计师和前端工程师之间少一些争吵多一些真诚(摊手)。
【优设网 原创文章 投稿邮箱:2650232288@qq.com】