我想要做的是同时显示background-color
和background-image
,这样我的div
的一半将覆盖右边的阴影背景图像,而另一部分将覆盖背景颜色。
但是当我使用background-image
时,颜色就消失了。
发布于 2009-05-24 13:30:13
同时使用颜色和图像作为元素的背景是完全可能的。
您可以设置background-color
和background-image
样式。如果图像比元素小,则需要使用background-position
样式将其放在右侧,并使用background-repeat
样式防止重复和覆盖整个背景:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
或者使用复合样式background
background: green url(images/shadow.gif) right no-repeat;
如果使用复合样式background
分别设置这两个样式,则只使用最后一个样式,这可能是颜色不可见的原因之一:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
没有办法特别限制背景图像只覆盖元素的一部分,因此您必须确保图像比元素小,或者它有任何透明区域,以使背景颜色可见。
发布于 2014-01-27 20:04:41
要对图像进行染色,可以使用CSS3 background
堆叠图像和linear-gradient
。在下面的例子中,我使用了一个没有实际渐变的linear-gradient
。浏览器将渐变视为图像(我认为它实际上生成了一个位图并将其覆盖),因此,实际上是在堆叠多个图像。
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
如果你有png,将会产生一个浅蓝色的图表纸。请注意,堆叠顺序可能与您的心理模型相反,第一个项目在顶部。
Mozilla的优秀文档,请访问:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
用于构建渐变的工具:
http://www.colorzilla.com/gradient-editor/
注意--在IE11中不起作用!当我发现原因时,我会更新的,因为这是应该的。
发布于 2009-05-24 12:23:48
使用
background:red url(../images/samle.jpg) no-repeat left top;
https://stackoverflow.com/questions/903659
复制相似问题