带有背景图像的渐变 CSS

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

你需要把image url放在gradient之后，像这样

#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。

带有背景图像的渐变 CSS

Gradient CSS with Background IMG

html

css

gradient