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

debugcn 发表于 Dev

保罗

我有一个包含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);

Fahad Hasan |

您可以background-position为您的background-image和两者指定不同的名称，方法是background-gradient使用逗号将它们分开。

另外，请指定您的background-image和background-gradientusingbackground属性而不是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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。