CSS'de Görüntü Parlaklığı Nasıl Azaltılır

107

CSS'de görüntü parlaklığını azaltmak istiyorum. Çok aradım ama elimde olan tek şey opaklığın nasıl değiştirileceğiyle ilgili, ama bu görüntüyü daha parlak hale getiriyor. biri bana yardım edebilir mi ?

css

— Shadi
kaynak

öznitelik opaklığını kullanabilirsiniz

— Satinder singh

Kullandım ama parlaklığı artırıyor ...

— Shadi

kabul edilen cevap iyi çalışıyor, ancak filtergelecekte farkında olmak isteyeceğiniz yeni bir CSS standart efekti de var. Cevabımı gör.

— Spudley

1

@shady, filtreleri içeren çözümler sunan cevaplardan birini doğru olarak işaretlemek için bu soruyu tekrar ziyaret edebilir misiniz? Doğru olarak işaretlediğiniz cevap, bunu 2006 yılında yapmanın yolu olacaktır.

— Wes Modes

177

Aradığınız özellik filter. Parlaklık dahil olmak üzere bir dizi görüntü efekti yapabilir:

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

Bununla ilgili yararlı bir makaleyi burada bulabilirsiniz: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Başka bir: http://davidwalsh.name/css-filters

Ve en önemlisi, W3C özellikleri: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Bunun bir özellik olarak CSS'ye çok yakın zamanda gelen bir şey olduğunu unutmayın. Bu kullanılabilir, ancak orada tarayıcılar çok sayıda henüz desteklenmemektedir olacak ve destek verenlerin bir satıcı öneki (yani gerektirecektir -webkit-filter:, -moz-filtervs.).

SVG kullanarak bunun gibi filtre efektleri yapmak da mümkündür. Bu efektler için SVG desteği sağlam bir şekilde oluşturulmuştur ve geniş çapta desteklenmektedir (CSS filtre özellikleri, mevcut SVG özelliklerinden alınmıştır)

Ayrıca, bunun IE'nin filtereski sürümlerinde bulunan özel stil ile karıştırılmaması gerektiğini unutmayın (yeni stil satıcı önekini düşürdüğünde ad alanı çatışmasıyla ilgili bir sorunu tahmin edebilirim).

Bunların hiçbiri sizin için işe yaramazsa, mevcut opacityözelliği yine de kullanabilirsiniz , ancak düşündüğünüz gibi değil: sadece tek bir koyu renkle yeni bir öğe oluşturun, onu görüntünüzün üstüne yerleştirin ve kullanarak onu karartın opacity. Etki, koyulaşmanın arkasındaki görüntü olacaktır.

Son olarak filter buradan tarayıcı desteğini kontrol edebilirsiniz .

— Spudley
kaynak

32

OP parlaklığı artırmak değil, azaltmak istiyor . Opaklık, görüntünün daha karanlık değil daha parlak görünmesini sağlar.

Bunu, görüntünün üzerine siyah bir div yerleştirerek ve bu div'in opaklığını ayarlayarak yapabilirsiniz.

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

24

Opaklık hiçbir şeyi daha parlak veya daha karanlık yapmaz. Nesnenin şeffaflığını değiştirir. Bunun bir şeyi daha parlak veya daha koyu yapma etkisine sahip olup olmadığı, opaklığını değiştirdiğiniz öğenin arkasındaki arka plan rengine bağlı olacaktır. Söylediklerinizin aksine, siyah bir arka plan üzerine koyarsanız opaklığı artırarak daha koyu hale getirebilirsiniz. Siyah bir arka plan üzerinde% 99 şeffaf bir görüntü neredeyse siyah görünecektir. Bu nedenle, neden ayrı bir overlay div gerekli olduğunu anlamıyorum. Siyah bir BG'ye ayarlayabilirsiniz. Örneğin: jsbin.com/isemec/1/edit

— NickG

@NickG Beyaz arka plan olduğunu varsayarak söyledim. Yaptığınız şey kodumla aynı, yalnızca ben görüntünün üstüne yarı saydam siyah bir kaplama koyuyorum ve üstte yarı saydam bir görüntü olan opak siyah bir arka planınız var.

— sachleen

17

Kısacası, siyahı görüntünün arkasına yerleştirin ve opaklığı azaltın. Bunu, görüntüyü bir div içine kaydırıp ardından görüntünün opaklığını düşürerek yapabilirsiniz.

Örneğin:

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

İşte bir JSFiddle.

— JL235
kaynak

15

Kullanabilirsin:

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

— Nahomy Atias
kaynak

9

Bu "her ihtimale karşı önek atalım" politikası yanlıştır. Birincisi, Opera destekliyorsa sahip olmayacak -o-(Opera şimdi Webkit / Blink kullanıyor), ikincisi, Firefox doğrudan önekli olmayanlara atladı filter, üçüncüsü yanlış sıranız var, önekli olmayan sonuncusu olmalı, dördüncü, IE'ler için sözdizimi -ms-filterfarklıdır ( progid:DXImageTransform, vb.), beşinci, Firefox için sözdizimi farklıdır ve SVG gerektirir ( Dokümanlara bakın ), altıncı, yeni özelliklerin ön eklenmesi pek olası değildir çünkü satıcılar bunun ne kadar kötü bir fikir olduğunu fark etti

— Camilo Martin

5

@CamiloMartin, o zaman bu soruya henüz tam olarak cevaplanmadığı için daha eksiksiz bir cevap vermiş olmalısın.

— Wes Modes

-webkit-filtre: parlaklık () / -webkit-filtre: kontrast () çalışır. Bu soru için uygun bir cevap.

— Shilpa

sass mixin'de

— Erez Lieberman

6

CSS3 ile bir görüntüyü kolayca ayarlayabiliriz. Ancak bunun imajı değiştirmediğini unutmayın. Yalnızca ayarlanan görüntüyü gösterir.

Daha fazla ayrıntı için aşağıdaki koda bakın.

Bir görüntüyü gri yapmak için:

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

Sepya görünümü vermek için:

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

Parlaklığı ayarlamak için:

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

Kontrastı ayarlamak için:

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

Bir görüntüyü bulanıklaştırmak için:

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

— Raj Sharma
kaynak

1

Lütfen birden fazla soruya tam olarak aynı cevabı göndermeyin: ya hepsi için uygun değildir ya da sorular, bu şekilde işaretlenmesi / kapatılması gereken mükerrer sorulardır.

— kleopatra

3

Bunu bugün buldum. Bana gerçekten yardımcı oldu. http://www.propra.nl/playground/css_filters/

İhtiyacınız olan tek şey bunu css stilinize eklemek:

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

— Hareket Halindeki Ruh
kaynak

2

Bir arka plan resminiz varsa, bunu yapabilirsiniz: Arka plan resmine bir rgba () gradyanı ayarlayın.

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

Snippet'i genişlet

— Sébastien Gicquel
kaynak

mükemmel. Arka plan resmini koyulaştırmak için bir çözüme ihtiyacım vardı ve diğer tüm cevaplar tüm div'i kararttı.

— nuander

1

Web-kit için aşağıdaki css filtrelerini kullanabilirsiniz. lütfen şu örneğe bakın: http://jsfiddle.net/m9sjdbx6/4/

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

— GibboK
kaynak

0

-webkit-filter: brightness(0.50);

Bu harika çözüme sahibim: https://jsfiddle.net/yLcd5z0h/

— Prashant Ghimire
kaynak

0

siyah resmi beyaza dönüştürmeniz gerekiyorsa bunu deneyin:

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

— Rizo
kaynak

-3

Sevmek

.classname
{
 opacity: 0.5;
}

— Satinder Singh
kaynak

teşekkürler ama parlaklığı artırmak onu azaltmıyor !!

— Shadi

Arka plan rengine bağlıdır.

— kıyamet

Eğer resmin parlaklık siyah azalacak koyarsanız onun ... arkaplan rengine bağlıdır sağ @zgnilec

— Shadi

bu, parlaklığı% 100'den fazla artırmak için işe yaramaz, opaklık yalnızca 1'e kadar çıkabilir

— Javis Perez

İngilizce olmayan bir konuşmacı olarak, aslında "opaklık" aramak istedim ve yine de bu yanıtı önerdim. Bu cevap soruyu cevaplamasa bile opacity, parlaklığı artırdığını bilmek güzel . ;)