Изменить яркость фонового изображения?

Мне интересно, можно ли изменить яркость:

 body{
 background-image:url();
 }

Использование HTML/CSS. Причина, по которой я хотел бы ее изменить, заключается в том, что я потратил довольно много времени на создание изображения, но когда я помещаю его на сайт, он внезапно становится вдвое ярче. Я сравнил исходный файл и файл, который вводится на веб-сайт, и они оба очень разные цвета синего.

Есть ли причина для этого, и есть ли способ изменить яркость?

Спасибо.

Ответы

Ответ 1

Это будет вариант, но это не очень практично и не будет работать в старых браузерах:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Или для улучшения управления цветом, попробуйте hsla() цвета:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

Действительно, лучше воспроизводить изображение в редакторе изображений, пока вы не получите нужный результат в браузере.

Ответ 2

background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

Это поместит 50% белого поверх исходного изображения.

Необходимо использовать функцию линейного градиента, иначе она не работает.

Или вы можете использовать:

.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }

и это лучше для удобства сопровождения кода.

Ответ 3

Нет никакого способа сделать это, что работает в каждом браузере, но если вы хотите, вы можете сделать это в браузерах webkit (Chrome, Safari, Opera), используя стиль filter:

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

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

Ответ 4

У меня была та же проблема, но это было с Gif.

Мое обходное решение:

Я сделал очень маленькое изображение черного квадрата в PowerPoint и установил его прозрачность на 50% и сохранил его как файл с названием "dimmerswitch.png"

Чем я назову это первым в коде:

body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}

Ответ 5

Обновление к другому ответу.

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

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

Недостатком является то, что в настоящее время не поддерживается в Firefox, если не включены экспериментальные настройки. Но это должно скоро измениться, и на момент написания этого, Firefox занимает всего 6,5% рынка.

enter image description here

тем не менее, он полностью поддерживается в Chrome

body {
content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: brightness(120%);
    pointer-events: none;
}

Ответ 6

Вы просто делаете Photoshop для уменьшения яркости, если нет другого способа.