it-swarm.com.ru

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

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

 body{
 background-image:url();
 }

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

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

Благодарю.

16
user3227878

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

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

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

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

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

18
ralph.m
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); .... }

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

6
Martin Zvarík

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

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

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

5
Joeytje50

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

Мой обходной путь:

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

Чем я упомянул это первое в коде:

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