Question

所以我试图找出如何让IMG在它上面有一个渐变层，并且它没有正确显示！

它既可以显示渐变，也可以显示图像，但不能同时显示两者。

CSS即时使用

#grad1 {
height: 200px;
background: url(images/back3.gif), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: url(images/back3.gif), -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: url(images/back3.gif), -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: url(images/back3.gif), linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */

}

使用

的HTML代码

<div id="grad1"></div>

任何人都可以帮忙，我迷失了！

Answer 1

您需要在渐变之后添加图片网址，就像这样

#grad1 {
height: 200px;
background: rgba(255,0,0,1)), url(images/back3.gif); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* Standard syntax (must be last) */

<强> See in JSFiddle

Answer 2

您将要执行此操作：

How do I combine a background-image and CSS3 gradient on the same element?

改为使用background-image。

带背景IMG的渐变CSS

2 个答案: