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

мне интересно, если это возможно, чтобы изменить яркость:Изменить яркость фонового изображения?

body{ 
background-image:url(); 
}

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

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

Спасибо.

источник

2014-01-26 user3227878

нет вы не можете. сохраните изображение в требуемой яркости. –

https://hsivonen.fi/png-gamma/ – Quentin

Я не думаю, что вы читаете всю вещь Gert B, я сохранил изображение в яркости, в которой я нуждаюсь, и исходный файл идеально подходит, но как только я помещаю его на сайт, он внезапно становится вдвое ярче или, в два раза, яркостью синего оттенка. – 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() цвета:

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

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

источник

2014-01-26 12:45:40

простой и гениальный! Спасибо! – Tom

Полезно здесь: http://www.w3schools.com/colors/colors_hsl.asp –

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

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

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

источник

2014-01-26 12:40:52 Joeytje50

Но это уменьшит весь элемент, включая текст и границу .... лучше использовать opacity() или что-нибудь еще. – mzvarik

Непрозрачность не обязательно скрашивает, она просто пропускает фон.Чтобы непрозрачность отображала аналогичный эффект, вам необходимо обеспечить, чтобы родительский элемент имел белый фон. Применение «background: white» к изображению не будет выполняться, поскольку фон также будет иметь непрозрачность, установленную для того же значения для фона. – Joeytje50

-4

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

источник

2016-06-18 11:33:02

Итак, если ваш ответ понимается как «Просто фотошоп с изображениями. Не забудьте найти для него правило CSS» ... '?! «Хорошо ... Может быть, ответ. –

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

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

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

Чем я ссылка, что один первый в коде:

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

источник

2017-02-24 06:06:23 Floppsy

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

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

Функция линейного градиента должна использоваться, иначе она не будет работать.

Или вы можете использовать .someObj: after {content: ''; фон: RGBA (255255255, 0,5); ....}, что лучше для удобства обслуживания кода.

источник

2017-12-21 09:15:45 mzvarik

Это прекрасное решение, которое отлично работает на контейнерах с прокруткой параллексов: background-image: linear-gradient (rgba (255,255,255,0.5), rgba (255,255,255,0.5)), url (myimage.png); – Manuel

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

ответ

Смежные вопросы