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

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

ОТВЕТЫ

Ответ 1

Функция, которую вы ищете, это 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. Эффект будет за счет затемнения.

Надеюсь, что это поможет.

Ответ 2

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

Вы можете сделать это, наложив черное 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>

DEMO

Ответ 3

Короче говоря, поместите черный за изображение и опустите opactiy. Вы можете сделать это, обернув изображение в 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.

Ответ 4

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

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

Ответ 5

С 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);
  }

Ответ 6

Я нашел это сегодня. Это действительно помогло мне. http://www.propra.nl/playground/css_filters/

Все, что вам нужно, это добавить это в свой стиль css.:

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

Ответ 7

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

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

Ответ 9

Как

.classname
{
 opacity: 0.5;
}