CSS线性渐变垂直定位

时间:2012-06-06 13:36:02

标签: css

以下是工作示例:

http://jsfiddle.net/nnrgu/1/

在这里我改为背景位置:0px -70px,看看发生了什么:

http://jsfiddle.net/nnrgu/2/

线性渐变,它消失了!

我做错了或它应该以这种方式工作? 如何使用背景图像一起移动线性渐变或保持线性渐变不可移动

感谢。

1 个答案:

答案 0 :(得分:4)

background-position: 0 -70px, 0 0;

诀窍。由于您声明了多个以逗号分隔的背景图像,因此您可以为每个图像声明一个位置,也可以用逗号分隔。

http://jsfiddle.net/nnrgu/3/

我甚至更喜欢速记:

background: <color> image1 position1 repeat1 attachment1, image2 position2 repeat2 attachment2, ... ;

这样很明显哪个位置/重复属于哪个图像的字符较少。

旁注:当您有0作为值时,只需省略该单位。