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

107

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

css

— Шади
источник

вы можете использовать непрозрачность атрибута

— Сатиндер Сингх

Я использовал его, но он увеличивает яркость ...

— Шади

принятый ответ работает хорошо, но есть также новый стандартный filterэффект CSS, о котором вы захотите знать в будущем. Смотрите мой ответ.

— Spudley

1

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

— Уэс Модес,

177

Функция, которую вы ищете 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 здесь .

— Spudley
источник

32

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

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

<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>

ДЕМО

— Sachleen
источник

24

Непрозрачность не делает ничего ярче или темнее. Изменяет прозрачность объекта. Делает это что-то ярче или темнее или нет, будет зависеть от цвета фона за элементом, прозрачность которого вы меняете. Вопреки тому, что вы говорите, вы можете сделать что-то темнее, увеличив непрозрачность, если вы поместите это на черный фон. Изображение с прозрачностью 99% на черном фоне будет казаться почти черным. Поэтому я не понимаю, почему требуется отдельный оверлейный div. Можно просто установить на черный БГ. Например: jsbin.com/isemec/1/edit

— NickG

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

— sachleen

17

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

Например:

<!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 ( см. документацию ), в-шестых, новые функции вряд ли будут иметь префиксы, потому что производители осознали, насколько плохая идея

— Камило Мартин

5

@CamiloMartin, тогда вам следовало дать более полный ответ на этот вопрос, поскольку он еще не получил полного ответа.

— Wes Modes

-webkit-filter: яркость () / -webkit-filter: контраст () работает. Это удачный ответ на вопрос.

— Шилпа

вы можете использовать его в sass mixin вот так: gist.github.com/johnferrie/3836468

— Эрез Либерман,

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

Пожалуйста, не публикуйте один и тот же ответ на несколько вопросов: либо он не подходит для всех, либо вопросы дублируются, и их следует пометить / закрыть как таковые.

— kleopatra

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>

Развернуть фрагмент

— Себастьен Жикель
источник

превосходно. Мне нужно было решение для затемнения фонового изображения, а все остальные ответы затемняли бы весь div.

— nuander

1

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

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

— Гиббок
источник

0

-webkit-filter: brightness(0.50);

У меня есть классное решение: https://jsfiddle.net/yLcd5z0h/

— Прашант Гимире
источник

0

попробуйте это, если вам нужно преобразовать черное изображение в белое:

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

— Ризо
источник

-3

подобно

.classname
{
 opacity: 0.5;
}

— Сатиндер Сингх
источник

спасибо, но увеличение яркости не уменьшает ее !!

— Shadi

Это зависит от цвета фона.

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

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

— Шади

это не работает для увеличения яркости более чем на 100%, непрозрачность может достигать только 1

— Javis Perez

Поскольку я не говорю по-английски, я действительно хотел поискать «непрозрачность» и все равно получил этот ответ. Даже если этот ответ не отвечает на вопрос, полезно знать, что это opacityувеличивает яркость. ;)