it-swarm.com.ru

Наложение фонового изображения на фоновый цвет rgba

У меня есть div с background-image. Я хочу наложить фоновое изображение цветом rgba (rgba(0,0,0,0.1)), когда пользователь наводит курсор на элемент div.

Мне было интересно, есть ли решение с одним делением (т.е. не с несколькими делениями, одно для изображения, одно для цвета и т.д.). 

Я пробовал несколько вещей:

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

И этот CSS:

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('the-image'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

Смотрите это скрипка .

Единственный вариант, который я видел, это сделать другое изображение с наложением, предварительно загрузить его с помощью JavaScript, а затем использовать .the-div:hover { background: url('the-new-image'); }. Тем не менее, я бы хотел решение только для CSS (аккуратнее; меньше HTTP-запросов; меньше жесткого диска). Есть ли?

47
Keelan

Недостатком решения от PeterVR является то, что дополнительный цвет отображается поверх всего HTML-блока. Это означает, что он также отображается поверх содержимого div, а не только поверх фонового изображения. Это хорошо, если ваш div пуст, но если он не использует линейный градиент, может быть лучшим решением:

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

Смотрите скрипка . Жаль, что спецификации градиента в настоящее время беспорядок. Смотрите таблица совместимости , приведенный выше код должен работать в любом браузере с заметной долей рынка - за исключением MSIE 9.0 и старше.

Edit (март 2017 г.): состояние сети стало намного менее запутанным. Таким образом, строки linear-gradient (поддерживаемые Firefox и Internet Explorer) и -webkit-linear-gradient (поддерживаемые Chrome, Opera и Safari) достаточны, дополнительные префиксные версии больше не нужны.

46
Wladimir Palant

Да, есть способ сделать это. Вы можете использовать псевдоэлемент after, чтобы расположить блок поверх фонового изображения. Примерно так: http://jsfiddle.net/Pevara/N2U6B/

CSS для :after выглядит так:

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

Правка:
Если вы хотите применить это к непустому элементу и просто получить наложение на фон, вы можете сделать это, применив положительный z-index к элементу и отрицательный к :after. Что-то вроде этого:

#the-div {
    ...
    z-index: 1;
}
#the-div:hover:after {
    ...
    z-index: -1;
}

И обновленная скрипка: http://jsfiddle.net/N2U6B/255/

34
Pevara

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
    height: 1280px;
    width: 960px;
    background-size: cover;
}

.tinted-image p {
    color: #fff;
    padding: 100px;
  }
<div class="tinted-image">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum!</p>
  
</div>

источник: https://css-tricks.com/tinted-images-multiple-backgrounds/

5
pgrono

В идеале свойство background позволит нам наложить различные фоновые изображения, аналогичные фоновому фоновому изображению, подробно описанному по адресу http://www.css3.info/preview/multiple-backgrounds/ . К сожалению, по крайней мере в Chrome (40.0.2214.115) добавление фона rgba вместе с фоном изображения url (), кажется, нарушает свойство.

Решение, которое я нашел, состоит в том, чтобы визуализировать слой rgba как изображение в формате Base64 размером 1px * 1px и встроить его.

.the-div:hover {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}

для изображений с кодировкой base64 1 * 1, которые я использовал http://px64.net/

Вот ваш jsfiddle с этими изменениями. http://jsfiddle.net/325Ft/49/ (Я также поменял изображение на то, которое все еще существует в Интернете)

3
RedEight

Я получил следующее на работу:

html {
  background:
      linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
      url('bgimage.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Вышеприведенное приведет к созданию прозрачного непрозрачного синего наложения. 

0
guero64