Как можно подкрасить фоновое изображение с помощью CSS?

У меня есть фоновое изображение, созданное с помощью CSS.

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

Я планирую иметь другое фоновое изображение для разных страниц веб-сайта: поэтому важно, чтобы текст был разборчивым над ним. Прямо сейчас у меня есть полупрозрачный черный фон для моего #main контента в середине, как это, чтобы обеспечить удобочитаемость:

#main {
background: rgba(0, 0, 0, 0.5);
}

Однако я действительно хочу, чтобы этот полупрозрачный фон был весь фоновый рисунок, потому что черный ящик выглядит немного неуклюжим. Я пробовал сделать <div id=#tint>, который включает весь HTML-документ и дающий rgba (0, 0, 0, 0.5) в #tint, но это не работает вообще - я не могу ничего изменить или я может получить весь фон, чтобы он стал простым серым, без какого-либо фонового изображения. Это просто невозможно?

Ответы

Ответ 1

Я думаю, вам нужно создать элемент overlay (потенциально div), который имеет искомый полупрозрачный фон. Что-то вроде:

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

И, конечно, небольшая демонстрация: небольшая ссылка.

Ответ 2

Используйте background-blend-mode для простого оттенка

Вы можете использовать свойство background-blend-mode css:

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

Поместите его на любой элемент с фоновым изображением, и все готово.

Это свойство хорошо поддерживается в современных браузерах NOT, включая IE latest и Edge (состояние предварительного просмотра можно включить с флагом). Для не поддерживающих браузеров вы можете использовать полифилл.

Рабочая демонстрация

Другие параметры

Используйте filter для сложного оттенка

Вы можете использовать свойство filter css:

.background-tint {
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}

Поместите его на любой элемент с фоновым изображением, и все готово. Чтобы изменить цвет, измените значение hue-rotate.

Это свойство хорошо поддерживается в современных браузерах НЕ, включая IE 11.

Рабочая демонстрация

Используйте плоский линейный градиент и многократное наложение фона

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

Я думаю, что это наиболее широко используемый метод, но его недостаток заключается в жестком кодировании, т.е. нельзя просто взять урок, прикрепить его к элементу и сделать оттенок.

Вы могли бы сделать это в менее или дерзкий миксин, что-то вроде:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

Рабочая демонстрация

Используйте прозрачный фон

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

Этот метод имеет преимущество работы в большинстве браузеров и является просто хорошим классом, который вы добавляете к любому элементу. Недостатком является то, что если у вас есть что-то еще внутри этого элемента, вам придется обернуть его в элемент div с некоторым видом позиционирования position: relative, который будет работать лучше всего.

Пример:

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>

.u-relative { position: relative; }

Рабочая демонстрация

Ответ 3

Это сработало отлично для меня:

https://css-tricks.com/tinted-images-multiple-backgrounds/

.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(image.jpg);
}

И, основываясь на другом ответе, вы можете сделать это с существующими цветами меньше:

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),

Ответ 5

Попробуйте непрозрачность:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */