Як зменшити яскравість зображення в CSS

105

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

css

— Шаді
джерело

Ви можете використовувати атрибут непрозорість

— Satinder singh

Я використовував його, але це збільшує яскравість ...

— Шаді

прийнята відповідь працює добре, але є і новий стандартний filterефект CSS, про який ви хочете знати, на майбутнє. Дивіться мою відповідь.

— Спудлі

1

@shady, будь ласка, перегляньте це питання, щоб позначити один із відповідей, пропонуючи рішення, що містять фільтри, як правильні. Відповідь, яку ви вказали правильною, був би спосіб зробити це у скажі 2006 р.

— Уес Модс

175

Ви шукаєте функцію filter. Він здатний робити різноманітні ефекти зображення, включаючи яскравість:

#myimage {
    filter: brightness(50%);
}

Ви можете знайти корисну статтю про це тут: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Інша: http://davidwalsh.name/css-filters

І найголовніше - характеристики W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Зауважте, це те, що лише зовсім недавно входить у CSS як особливість. Він доступний, але велика кількість браузерів не підтримуватиме його ще й ті , які роблять підтримку для цього буде потрібно префікс постачальника (тобто -webkit-filter:, -moz-filterі т.д.).

Також можна зробити такі ефекти фільтру за допомогою SVG. Підтримка SVG для цих ефектів добре налагоджена та широко підтримується (специфікації фільтрів CSS взяті з існуючих специфікацій SVG)

Також зауважте, що це не слід плутати з патентованим filterстилем, доступним у старих версіях IE (хоча я можу передбачити проблеми зі зіткненням простору імен, коли новий стиль скидає свій префікс постачальника).

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

Нарешті ви можете перевірити підтримку браузера filter тут .

— Спудлі
джерело

32

OP хоче зменшити яскравість, а не збільшувати її. Непрозорість робить зображення яскравішим, а не темнішим.

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

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

DEMO

— Sachleen
джерело

24

Непрозорість не робить нічого яскравішим або темнішим. Це змінює прозорість об’єкта. Від того, чи це призведе до того, щоб зробити щось яскравіше або темніше, буде залежати від кольору фону за елементом, на який ви змінюєте непрозорість. На відміну від сказаного, ви можете зробити щось темніше, збільшивши непрозорість, якщо нанести його на чорний фон. 99% прозоре зображення на чорному тлі буде майже чорним. Тому я не розумію, чому потрібен окремий роздільний набір. Ви можете просто встановити його на чорному BG. Напр .: jsbin.com/isemec/1/edit

— NickG

@NickG Я сказав, що припускаючи білий фон. Те, що ви зробили, - те саме, що і мій код, тільки я поклав напівпрозору чорну накладку зверху на зображення, а ви маєте непрозорий чорний фон з напівпрозорим зображенням зверху.

— sachleen

17

Коротше кажучи, розмістіть чорний колір позаду зображення, а опустіть опустіть. Це можна зробити, обернувши зображення всередині символу, а потім зменшивши непрозорість зображення.

Наприклад:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

Ось JSFiddle.

— JL235
джерело

15

Ви можете використовувати:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

— Нахомій Атіас
джерело

9

Ця політика "кинемо префікси про всяк випадок" є помилковою. По-перше, якщо Opera коли-небудь підтримує його у нього не буде -o-(Opera використовує Webkit / Blink зараз), по-друге, Firefox стрибнув прямо у нефіксований filter, по-третє, у вас неправильний порядок, попередній префікс повинен бути останнім, четвертим, синтаксис для IE -ms-filterвідрізняється ( progid:DXImageTransformі т. д.), по-п'яте, синтаксис для Firefox відрізняється і вимагає SVG ( див. документи ), по-шосте, нові функції, швидше за все, не будуть встановлені, оскільки постачальники зрозуміли, наскільки ця ідея погана

— Camilo Martin

5

@CamiloMartin, тоді ви мали б дати більш повну відповідь на це питання, оскільки на нього ще не отримали повного відповіді.

— Wes Modes

-webkit-filter: яскравість () / -webkit-filter: контраст () працює. Це влучна відповідь на запитання.

— Шилпа

ви можете використовувати його в sass mixin так

— Erez Lieberman

6

За допомогою CSS3 ми можемо легко налаштувати зображення. Але пам’ятайте, що це не змінює імідж. Він відображає лише відрегульоване зображення.

Докладнішу інформацію див. У наступному коді.

Щоб зробити зображення сірим:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

Щоб надати сепію вигляд:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

Для налаштування яскравості:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

Щоб налаштувати контраст:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

Щоб розмити зображення:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

— Радж Шарма
джерело

1

Будь ласка, не публікуйте однакову відповідь на кілька запитань: це або не годиться для всіх, або питання є дублікатами, які слід позначити / закрити як такі.

— Клеопатра

3

Я сьогодні це знайшов. Це мені дуже допомогло. http://www.propra.nl/playground/css_filters/

Все, що вам потрібно, це додати це до вашого стилю css .:

div {-webkit-filter: brightness(57%)}

— Дух у русі
джерело

2

Якщо у вас є фонове зображення, ви можете зробити це: Встановіть градієнт rgba () на фоновому зображенні.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

Розгорніть фрагмент

— Себастьєн Гікель
джерело

відмінна. Мені знадобилося рішення, щоб затемнити фонове зображення, а всі інші відповіді затемнюють весь дів.

— nuander

1

Ви можете використовувати css фільтри нижче та приклад для веб-набору. перегляньте цей приклад: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

— GibboK
джерело

0

-webkit-filter: brightness(0.50);

У мене це класне рішення: https://jsfiddle.net/yLcd5z0h/

— Прашант Гіміре
джерело

0

спробуйте це, якщо вам потрібно перетворити чорне зображення в білий:

.classname{
    filter: brightness(0) invert(1);
}

— Різо
джерело

-3

Подібно до

.classname
{
 opacity: 0.5;
}

— Сатинг сингх
джерело

дякую, але збільшуючи яскравість, не зменшуючи його !!

— Шаді

Це залежить від кольору фону.

— апокаліпсис

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

— Shadi

це не працює для збільшення яскравості більше ніж на 100%, непрозорість може досягати лише 1

— Javis Perez

Будучи оратором, що не є англійською, я насправді хотів шукати "непрозорість" і все одно запропонував цю відповідь. Навіть якщо ця відповідь не відповідає на питання, добре знати, що opacityзбільшує яскравість. ;)