Градиент CSS с фоном IMG

так что я пытаюсь выяснить, как получить IMG, у него есть слой градиента, и он не отображается правильно!Градиент CSS с фоном 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>

Может кто-нибудь помочь, им потерял с этим!

источник

2015-06-18 user3146987

Это шов, чтобы работать на другом посту, но почему мой не работает? – user3146987

Вам нужно положить URL изображения после градиента, как так

#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

источник

2015-06-18 15:19:49 Muhammet