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

Имам div с background-image. Искам да насложа фоновото изображение с rgba цвят (rgba(0,0,0,0.1)), когато потребителят задържи div.

Чудех се дали има решение с едно div (т.е. не с множество 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 заявки; по-малко твърд диск). Има ли?


css background background-image rgba
person Community    schedule 16.06.2013    source източник

Отговори (5)


arrow_upward
53
arrow_downward

Решението от 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 и по-стари.

Редактиране (март 2017 г.): Състоянието на мрежата вече е много по-малко объркано. Така че редовете linear-gradient (поддържан от Firefox и Internet Explorer) и -webkit-linear-gradient (поддържан от Chrome, Opera и Safari) са достатъчни, вече не са необходими допълнителни версии с префикс.

person Wladimir Palant    schedule 11.12.2013
comment
Можете леко да оптимизирате това, като използвате base64 кодирано изображение 1px на 1px в цвета, който желаете. Просто използвайте кодиран png и можете да получите прозрачността и всичко останало. Недостатъкът на base64 изображенията е лошата четливост и бързите промени не са лесни. Все пак избягвате да имате 5 допълнителни линии за всички спецификации на градиента. - person RedEight; 03.05.2016
comment
@RedEight: Версиите -moz и -ms вече не трябва да са необходими, същото важи и за наследената нотация на WebKit. И предполагам, че -o също не е необходим, по-новите версии на Opera са базирани на WebKit. Така че наистина ви трябват само два реда. - person Wladimir Palant; 03.05.2016

arrow_upward
37
arrow_downward

Да, има начин да направите това. Можете да използвате псевдоелемент 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/

person Pevara    schedule 16.06.2013
comment
Това е хубав трик, но за съжаление този слой наслагва и текста, а не само фоновото изображение. Така че това ще работи само за празни div. - person Wladimir Palant; 11.12.2013
comment
@WladimirPalant все още работи за непразни елементи, ако добавите z-индекс. Вижте актуализацията. - person Pevara; 24.01.2015

arrow_upward
6
arrow_downward 

/* 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/

person pgrono    schedule 25.01.2016
comment
Кодовият фрагмент не работи за мен и не прави това, което OP иска. - person Sajib Acharya; 25.01.2016

arrow_upward
3
arrow_downward

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

Решението, което намерих, е да изобразя rgba слоя като 1px*1px Base64 кодирано изображение и да го вмъкна.

.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/ (Също така смених изображението с такова, което все още съществува в интернет)

person RedEight    schedule 25.02.2015
comment
Малък отговор, който получихте тук. В крайна сметка използвах това днес, защото работи и в IE9. Мерси човече. - person igneosaur; 10.03.2017

arrow_upward
2
arrow_downward

Накарах следното да работи:

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;
}

Горното ще създаде хубаво непрозрачно синьо наслагване.

person guero64    schedule 23.08.2017