Еще одно фоновое изображение с прозрачностью градиента

Я проверил множество сайтов, посвященных этой теме, и нашел случайный материал без солидного. Я проверял вопрос, на который уже был дан ответ в stackoverflow, но это не то, что я ищу. Я изменил код в JSfilled упоминается и попытался добавить цвет фона на изображении, предполагают, чтобы быть прозрачным http://jsfiddle.net/FVNY7/518/ но, к сожалению, она не была вещь, которую я хочу, чтобы искатьЕще одно фоновое изображение с прозрачностью градиента

<div class="content"></div> 
    <div class="FadeAway"></div> 


.content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; background-color:red;} 

.FadeAway{ 
     position: absolute; top:0px; left:0px; width:100%; height:100%; 
     background:transparent; 
     background: linear-gradient(top, rgba(255, 255, 255, 255) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); 
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff); 

}

Я хочу фоновое изображение, смешивается с цветом фона (градиент начинается снизу вверх), другими словами, если фон моего сайта меняет цвет, прозрачный градиент учитывает цвет фона моего сайта, я не хочу, чтобы вручную определяемые цвета где начинается градиент. Надеюсь, ты понял, что я имею в виду. Пример jsfiddle, который я представил, - это то, чего я не хочу достичь. Пусть эта картина смешана с фоном. Надеюсь, ты понял мой вопрос.

источник

2015-06-29 Lucian Al-Zafari

Вам, вероятно, понадобится JS для этого. CSS не может определить цвета фона другого элемента. –

Возможно, вы захотите связаться с вопросом, который вы видели и который не соответствует вашим потребностям, и сказать, как ответы на этот вопрос не могут их удовлетворить. Потому что название и содержание этого вопроса не похоже на [этот вопрос] (http://stackoverflow.com/q/2504071/215552). –

Без JavaScript я бы рекомендовал использовать полупрозрачный PNG для изображения. Затем он будет смешаться с фоном.

В качестве альтернативы вы можете разместить изображение на нижнем уровне и использовать цвета RGBa для градиентов, применяемых поверх него.

источник

2015-06-29 15:51:40 bboysupaman

Еще одно фоновое изображение с прозрачностью градиента

ответ

Смежные вопросы