CSS 揭秘(2)--背景定位和条纹背景

Posted by liveipool on February 6, 2017

背景定位和条纹背景

背景定位

现代的背景定位可通过background-position、background-origin、calc()等属性或方法结合来使用产生效果。

background-position

  • background-position 属性设置背景图像的起始位置。
  • 可能的值:
  • top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right(如果您仅规定了一个关键词,那么第二个值将是”center”。并且注意这种写法和后两种写法的水平垂直顺序不同)
  • x% y%: 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
  • xpos ypos :第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
  • 可以混合使用 % 或 pos 和 position 值。如: top 30px left 20 px;
  • 注意,是在CSS3中才能混合使用这些参数值,因此项目若要面向旧版本的浏览器,要设置回退机制。

background-origin

  • background-origin 属性规定 background-position 属性相对于什么位置来定位。
  • 可能的取值为: padding-box、border-box、content-box。(默认为padding-box)

calc()方案

calc()是CSS3中引入的一个函数,可以进行四则运算。
如我们想把背景图片定位到距离底边10px,距离右边20px的位置,并且我们希望仍以左上角偏移的思路来思考,可以这么实现:

background: url("lallana.png") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);  //注意这里的顺序 100%-20是水平偏移量,后面一个是垂直偏移量。

注意在calc()函数内部的 - 和 + 运算符两侧需要各加一个空白符,否则会产生解析错误。这个规则是为了向前兼容,未来,在calc()内部可能会允许使用关键字,而这些关键字可能会带有连字符。

条纹背景

linear-gradient

repeating-linear-gradient

  • 用重复的线性渐变创建图像。
  • 参数值和linear-gradient类似。
div {
	background: linear-gradient(#fb3, #58a);
}

2.51.png

div {
	background: linear-gradient(#fb3 40%, #58a 60%);
}

2.52.png

div {
	background: linear-gradient(#fb3 50%, #58a 50%);
}

2.53.png
即,颜色后面的百分数的意思是,如容器顶部的40%去区域为#fb3纯色,容器底部的40%区域为#58a纯色,容器中间的20%为两种颜色的过度值。
因此设为50%和50%时,相当于设置了两条巨大的水平条纹。

div {
	background: linear-gradient(#fb3 30%, #58a 30%);
}

通过设置百分比还可以创建不等宽的条纹。 2.54.png

div {
	background: linear-gradient(#fb3 50%, #58a 50%);
	background-size: 100% 30px;
}

通过设置background-size来实现重复平铺的多条条纹。
2.55.png

由于规范中说到:

如果某个色表的位置值比整个列表中在它之前的位置值都要小,则该色标的位置值会被设置为它前面的所有色标值的最大值。

因此上面的代码也可以写为:

div {
	background: linear-gradient(#fb3 50%, #58a 0);
	background-size: 100% 30px;
}

2.55.png
要想创建多种颜色的条纹也是类似的道理:

div {
	background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
	background-size: 100% 45px;
}

2.56.png
可以通过加上参数”to right“来使条纹变为垂直方向(平时默认值为”to bottom“,也就是水平方向):

div {
	background: linear-gradient(to right, #fb3 50%, #58a 0);
}

2.57.png
当然,有了水平(0deg)和垂直(90deg),我们也可以通过角度来创建斜向条纹:

div {
	background: linear-gradient(45deg, #fb3 50%, #58a 0);
}

2.58.png
现在我们若想实现多条条纹平铺的效果,我们可以先用一种写法试验一下:

div {
	background: linear-gradient(45deg, #fb3 50%, #58a 0);
	background-size: 30px 30px;
}

2.59.png
可以发现,这样是行不通的。我们想要实现想要的效果,需要通过四条条纹而不是两条来实现无缝连接:

div {
	background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
	background-size: 30px 30px;
}

2.510.png
然而,由于条纹为45度斜向,因此在此时,条纹的宽度实际上为 15除以根号2 px,因此若想要得到想要的条纹宽度,还需要根据角度进行一定计算。
因为角度和条纹的宽度难以控制,因此这样的创建重复斜向条纹的方法并不太好,幸运的是,除了linear-gradient()和radial-gradient()(圆形式渐进),还各有一个循环式的加强版repeating-linear-gradient()和repeatinr-radial-gradient()。 如:

div {
	background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
}

2.511.png
有了这个repeating-*方法,我们就可以随心所欲的改变宽度和角度了。

div {
	background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}

2.512.png
在大多数情况下,我们想要的条纹图案并不是由差异极大的几种颜色组成的,这些颜色往往属于统一色系,只是在明度方面有着轻微的差异。比如:

div {
	background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
}

2.513.png
还有一种更好的方法实现上面的效果:不再为某种条纹单独指定颜色,而是把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上得到浅色条纹:

div {
	background: #58a;
	background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);  //transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
}

2.513.png