Напівпрозорий кольоровий шар над фоновим зображенням?


213

У мене є DIV, і я хотів би поставити візерунок як тло. Цей візерунок сірий. Щоб зробити це трохи приємніше, хотілося б нанести легкий прозорий кольоровий «шар». Нижче - те, що я спробував, але який не вийшов. Чи є спосіб нанести кольоровий шар на фонове зображення?

Ось мій CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Відповіді:


217

Ось:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML для цього:

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

Звичайно вам потрібно визначити ширину та висоту .backgroundкласу, якщо в ньому немає інших елементів


10
немає абсолютного приводу для відносного і абсолютного позиціонування.
Свен Бідер

2
Ага так, звичайно, я якось потрапив у модальне спливаюче вікно, не знаю чому. Ви відповідаєте, звичайно, чистіше і простіше.
Йоганнес Клаус

@ JohannesKlauß, як зрозуміти, чи легше його відповідь? це не працює, принаймні для мого випадку.
Danny22

2
Я думаю, що це чистіше. У тіньовій коробці є проблеми, якщо вміст не більше bg тощо
Джек

1
Ідеальне рішення!
Roy Shoa

300

Я знаю, що це справді стара тема, але вона відображається вгорі в Google, тому ось ще один варіант.

Цей чистий CSS і не потребує додаткових HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Існує дивовижна кількість застосувань для функції коробки-тіні.


3
Дуже хороша! Це гарна ідея продуктивності? Не заглядав у виступ боксу-тіні
Мігель Стівенс,

18
Хороший хак, але великий вбивця. Це сповільнить кожен мобільний пристрій. Тінь коробки викликає проблеми з продуктивністю на мобільних пристроях. Краще уникати цього, особливо якщо є інший шлях.
Гексод

4
Ви геніальний сер!
Міка

7
Лише оновлення через пару років: я зараз використовую цей метод на всьому kotulas.com, і жодного істотного уповільнення, яке я помітив, не спостерігається. Це може стати проблемою, якщо ви використовуєте його на сотнях елементів, але навіть на сторінці зі 150+ зображеннями це не є проблемою для мене. (І це на робочому комп’ютері.) Звичайно, ви захочете перевірити його достроково, щоб переконатися, що він підходить саме вам. Що стосується старої сумісності веб-переглядачів, оскільки резервна версія полягає в тому, що користувач не бачить ефекту наведення курсору (без інших проблем), я з цим все в порядку.
BevansDesign

8
Я особисто використовую це так: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Нейромедіатор

135

З CSS-трюків ... є один крок, як це зробити без z-індексації та додавання псевдо елементів - потрібен лінійний градієнт, що, на мою думку, означає, що вам потрібна підтримка CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

Це спрацювало чудово, ви не можете анімувати градієнти, однак, якщо хочете імпульсувати колір, не думайте, що це можливо за допомогою будь-якого методу.
хитрощі

1
У мене був background-size:cover;і background-position:center center;налаштований на цей елемент. Це, здається, скасує цей ефект.
Потіх

Чудово працює з фоновим розміром: обкладинка; після. На хром принаймні.
davidbonachera

Безумовно, найзручніший спосіб підфарбовувати фонові візерунки та зображення, але будьте обережні, щоб перевірити їх у Chrome та інших, особливо якщо застосовано до тега body, хром буде прокручуватися з тоною відставання. FF справляється з цим чудово.
Hastig Zusammenstellen

4
Я єдиний, хто досить старий, щоб отримати довідку про Тома?
Абрам

46

Ви також можете використовувати лінійний градієнт та зображення: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Це відбувається тому, що функція лінійного градієнта створює зображення, яке додається до фонового стеку. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient


Приємний хак для додання до панелі інструментів!
Адам Йост

26

Тоді вам знадобиться обгортковий елемент із зображенням bg, а в ньому елемент вмісту із кольором bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

і css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

25

Спробуйте це. Працює для мене.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

2
Це дійсно чудова відповідь, що не потребує додаткових елементів HTML. Дякую!
patr1ck

16

Я використовував це як спосіб застосувати кольорові відтінки, а також градієнти до зображень, щоб зробити динамічний накладений текст простішим у стилі для розбірливості, коли ви не можете керувати кольоровими профілями зображення. Вам не доведеться турбуватися про z-індекс.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Сподіваюся, це допомагає


Це працює, але вам потрібно змінити друге "ліво: 0;" до "знизу: 0;"
Меттью Хадсон

1
Це має бути прийнятою відповіддю, оскільки це дозволяє уникнути створення зайвих елементів. Просто переконайтесь, що ваше .background-зображення divмає принаймні позицію: відносна
mjsarfatti

6

Дивіться мою відповідь на https://stackoverflow.com/a/18471979/193494 для повного огляду можливих рішень:

  1. використовуючи кілька фонів з лінійним градієнтом,
  2. кілька фонів із створеним PNG або
  3. styling an: після псевдоелемента виконувати роль вторинного фонового шару.

4
Будь ласка, не публікуйте посилання як відповіді. Покладіть сюди відповідний код, але додатково посилання на джерело, з якого ви його скопіювали.
Blazemonger

4

Чому так складно? Ваше рішення було майже правильним, за винятком способу простіше зробити візерунок прозорим, а колір фону суцільним . PNG може містити прозорі плівки. Тому використовуйте фотошоп, щоб зробити візерунок прозорим, встановивши шар на 70% та змінивши зображення. Тоді вам потрібен лише один селектор. Працює крос-браузер.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

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

Це основні. Приклад використання слід , де я переключився від backgroundдо , background-imageале обидва властивості працює однаково.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

ПРОСИМО ЗАЧЕКАЙТЕ ХВІЛЬНУ! ВИНАЄТЕ ДЕЙНИЙ ЧАС ЗАВАНТАЖИТИ ВНУТРІШНІ ПАРТНЕРИ.

Цей веб-сайт здається досить повільним ...


Чи можете ви застосувати колір тла наприклад, наприклад, :hoverякий би накладався поверх фонового зображення?
Сер

для завантаження Photoshop знадобиться більше часу, а не додати кілька рядків коду.
нихізер

Я спробував це, але виявив, що прозорий png був досить великим (~ 500kb) у розмірі файлу, що може бути недоліком такого підходу
madz

@madz Я говорив про створення шаблону, який не повинен мати великий файл. Я додав приклад, використовуючи зображення розміром 110x110px, яке має всього 5 кбіт. Якщо вам дійсно потрібне велике зображення, спробуйте його скористатися tinypng.com .
Гексод

2

Ви можете використовувати напівпрозорий піксель, який ви можете створити, наприклад , тут , навіть в base64 Ось приклад з білими 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
  • без завантаження

  • без зайвих HTML

  • Я здогадуюсь, завантаження має бути швидшим, ніж тінь поля або лінійний градієнт


2

Ось більш простий трюк з лише css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>


1

Ще один із SVG як вбудоване зображення-накладення (зверніть увагу: якщо ви використовуєте #всередині SVG-коду, вам потрібно це urlencode!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

0

Я просто використав властивість css background-image css на цільовому тлі div.
Примітка: фонове зображення приймає лише функції градієнта кольору.
Тому я використав лінійний градієнт, додавши той самий бажаний колір накладення двічі (використовуйте останнє значення rgba для контролю непрозорості кольорів).

Також ці два корисні ресурси знайшли для:

  1. Додайте текст (або спільно з будь-яким іншим вмістом) над фоновим зображенням: зображення героя
  2. Розмиття лише фонового зображення, не розмиваючи знак зверху: Розмитість фонового зображення

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

0

Ви також можете додати непрозорість кольору накладення.

Замість того, щоб робити

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Ви можете зробити:

background: url('../img/bg/diagonalnoise.png');

Потім створіть новий стиль для кольору непрозорості:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Змініть непрозорість на будь-яке число, яке вам потрібно нижче 1. Потім ви зробите цей колірний стиль такого ж розміру, як і ваше зображення. Це має працювати.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.