CSS цвет фона над изображением

Question

EDIT: Чрезвычайно важно, что я забыл упомянуть, я не могу редактировать базовый html, только css. Это для таблицы стилей reddit.

Я хочу, чтобы полупрозрачный цвет фона на фоне изображения в качестве оттенка. Вот что я пытался: Это просто показывает изображение:

background: url(image) no-repeat, rgba(0,0,0,0.5); 

Это показывает изображение и разрушает его масштабирование (фон-размер: 100%;):

background: rgba(0,0,0,0.5), url(image) no-repeat; 

Это делает фон полностью черного цвета, с прозрачностью выцветания к тому, что за ним стоит вместо изображения:

background-image: url(image) no-repeat; 
background: rgba(0,0,0,0.5); 

Это еще раз показывает только изображение, и ломает масштабирование:

background-image: url(image) no-repeat; 
background-color: rgba(0,0,0,0.5); 

Это показывает только изображение, не нарушая масштабирование:

background: url(image) no-repeat; 
background-color: rgba(0,0,0,0.5); 

Я попытался с помощью ответа @Trevan «сек без удачи тоже:

#header:lang(dd) { 
    position: relative; 
    background: url(%%HexBackground%%) no-repeat; 
} 

#header:lang(dd)::before { 
    position: absolute; 
    content: ""; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.5); 
} 

Я, вероятно, делает это неправильно.

Answer 1

CSS только: box-shadow

Смотрите базовый пример здесь http://jsfiddle.net/vyo168gg/1/

div { 
    width: 500px; 
    height: 300px; 
    background: url(image) no-repeat; 
    box-shadow: 0px 5000px 0px rgba(256, 0, 0, 0.5) inset; 
} 

В принципе, вместо того, чтобы тень окна, показывая на внешней стороне элемента, мы ставим его на внутренней стороне ,

Трюк должен иметь первый или второй параметр : (?) Должен быть больше ширины/высоты элементов, чтобы он перекрывал все изображение.

Answer 2

не могут быть применимы в зависимости от того, что именно вы хотите сделать (предложить JSFiddle), но вы должны взглянуть на SVG фильтры:

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 3

То, что я бы, вероятно, сделать это использовать псевдо-элемент, расположенный абсолютно поверх элемента с фоном.

.example { 
    position: relative; 
    background: url(image) no-repeat; 
} 

.example::before { 
    position: absolute; 
    content: ""; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.5); 
} 

Answer 4

Наложение div сверху вашего изображения, может быть, что-то вроде этого?

HTML

<div class="picContainer"> 
    <div class="picContainerTint"></div> 
    <img src="http://rdjpg.com/300/200"/> 
</div> 

CSS

.picContainer { 
    height: 200px; 
    width:300px; 
    position:relative; 
} 

.picContainerTint { 
    height: 100%; 
    width: 100%; 
    background: rgba(0,0,0,0.2); 
    position: absolute; 
    z-index:2; 
} 

JSFIDDLE

Answer 5

Что-то вроде этого?

Здесь мы используем псевдоэлемент :after, чтобы дать вам желаемый эффект от наложенного оттенка изображения без мутации DOM.

Ваши преимущества делают это таким образом, в отличие от других являются

1. Вы не вставлять отображения только элементы в документе, сохраняя его содержание сосредоточено (как это должно быть!)
2. Эта позволяет сохранять все элементы наведения на фактическом div с изображением, в отличие от необходимости вводить излишне сложные селектора CSS.Они могут фактически замедлить работу вашего сайта, верьте или нет.
3. Нет никакого риска проблем с z-индексами, поскольку контекст укладки сохраняется внутри самого div. Это может показаться незначительным, но может быть огромным PITA, если вы пытаетесь поддерживать IE6 или 7.

Наслаждайтесь!

.my-totally-cool-image-tint { 
 
    background-image: url(http://rawmultimedia.files.wordpress.com/2012/03/totally-cool-crazy-epic-2.jpg); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 600px; 
 
    position: relative; 
 
} 
 
.my-totally-cool-image-tint:after { 
 
    content: ''; 
 
    position:absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: rgba(12, 218, 255, 0.5); 
 
    transition: 0.2s ease-out 0.5s; 
 
    opacity: 1; 
 
} 
 

 
.my-totally-cool-image-tint:hover:after { 
 
    opacity: 0; 
 
    transition: 1s ease-out; 
 
}

<div class="my-totally-cool-image-tint"> 
 
    
 
    </div>

Answer 6

Что вам нужно сделать, это отдельный прозрачность от фона. Делать что-то вроде должно работать:

HTML

<div class="background"> <div class="tint"></div> </div>

CSS

.background{ 
    background: url(image) no-repeat; 
    position: relative; 
} 
.tint{ 
    background: url(transparent-image); 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

Вы можете использовать цвет и непрозрачность для отлива, но не все браузеры признают, что свойство (IE8) ,