Question

我有一张包含4张小图片的大图片。我想像4px 4px一样设置图像位置以显示第一个小图像，但它也用于渐变背景。如何独立设置背景图像位置和渐变位置？

background-image: url('../big_image.png'), -moz-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -ms-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -o-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -webkit-linear-gradient(#FFFFFF, #ECECEC);
background-position: 4px 4px;

我尝试使用此变体：

background-image: url('../big_image.png'), 4px 4px, -moz-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -ms-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -o-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -webkit-linear-gradient(#FFFFFF, #ECECEC);

或者这个：

background-image: url('../big_image.png'), -moz-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -ms-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -o-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -webkit-linear-gradient(4px 4px, #FFFFFF, #ECECEC);

Answer 1

您可以使用逗号分隔background-position和background-image，为background-gradient和background-image指定不同的background-gradient。

另外，使用background属性而不是background-image指定您的background: url('../big_image.png'), -moz-linear-gradient(#FFFFFF, #ECECEC); background: url('../big_image.png'), -ms-linear-gradient(#FFFFFF, #ECECEC); background: url('../big_image.png'), -o-linear-gradient(#FFFFFF, #ECECEC); background: url('../big_image.png'), -webkit-linear-gradient(#FFFFFF, #ECECEC); background-position: 4px 4px, 0px 0px;和{{1}}。

这应该是完美的：

{{1}}

Answer 2

我认为你必须在CSS中使用Z-index 1，你制作一个包含bg图像及其位置的div 第二，你用渐变和他们的位置做另一个div 然后根据需要设置每个z-index，如果渐变位于图像后面，渐变的z-index小于图像

如何独立设置背景图像位置和渐变位置？

2 个答案: