1

Как на картинку наложить цвет с прозрачностью в 0.3 (например, красный) на background-image: url();?

3 ответа 3

5

Ответ от @ДмитрийВасильевич был верный, но нужно поменять местами градиент и фоновое изображение:

background-image: 
  linear-gradient(to top, rgba(255,0,0,0.3), rgba(255,0,0,0.3)),
  url(http://vmeste.eu/fun/1142791216.jpg);

Изображение идущее в коде выше перекрывает изображение идущее ниже.

Также можно по отдельности для градиента и изображения задать прочие фоновые свойства:

background-repeat: no-repeat, no-repeat;
background-size: cover, contain;
4

http://jsfiddle.net/h8ekayuu/

HTML

<div class="img">
    <div class="img-overlay"></div>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}

.img{
    width: 500px;
    height: 500px;
    background: url(http://vmeste.eu/fun/1142791216.jpg) no-repeat center top;
}
.img-overlay{
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.3);
}
1
  • 2
    W3C дала вам псевдоэлементы, а вы городите блоки, зачем? ( jsfiddle.net/h8ekayuu/1 )
    – ferrari
    6 ноя 2014 в 14:39
1
background: url(http://vmeste.eu/fun/1142791216.jpg), linear-gradient(to, top, rgba(255,0,0,0.3), rgba(255,0,0,0.3));

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.