Cara Mengurangi Kecerahan Gambar di CSS

106

Saya ingin mengurangi kecerahan gambar di CSS. Saya banyak mencari tapi yang saya punya hanyalah tentang bagaimana mengubah opacity, tapi itu membuat gambar lebih cerah. ada yang bisa bantu saya ?

css Shadi
sumber
Anda dapat menggunakan opasitas atribut
Satinder singh
Saya menggunakannya tetapi meningkatkan kecerahan ...
Shadi
jawaban yang diterima berfungsi dengan baik, tetapi ada juga filterefek standar CSS baru yang ingin Anda waspadai di masa mendatang. Lihat jawaban saya.
Spudley
1
@shady, dapatkah Anda dengan ramah meninjau kembali pertanyaan ini untuk menandai salah satu jawaban yang menawarkan solusi yang melibatkan filter sebagai benar. Jawaban yang Anda tandai benar akan menjadi cara untuk melakukannya pada katakanlah 2006.
Wes Modes

Jawaban:

176

Fitur yang Anda cari adalah filter. Ia mampu melakukan berbagai efek gambar, termasuk kecerahan:

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

Anda dapat menemukan artikel bermanfaat tentangnya di sini: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Yang lain: http://davidwalsh.name/css-filters

Dan yang terpenting, spesifikasi W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Perhatikan bahwa ini adalah sesuatu yang baru-baru ini masuk ke CSS sebagai fitur. Ini tersedia, tetapi sejumlah besar browser di luar sana belum mendukungnya, dan mereka yang mendukungnya akan membutuhkan prefiks vendor (mis -webkit-filter:. -moz-filter, Dll).

Mungkin juga untuk melakukan efek filter seperti ini menggunakan SVG. Dukungan SVG untuk efek ini sudah mapan dan didukung secara luas (spesifikasi filter CSS telah diambil dari spesifikasi SVG yang ada)

Perhatikan juga bahwa ini jangan disamakan dengan filtergaya berpemilik yang tersedia di versi lama IE (meskipun saya dapat memprediksi masalah dengan ruang nama bentrok saat gaya baru menjatuhkan awalan vendornya).

Jika tidak ada yang berhasil untuk Anda, Anda masih dapat menggunakan opacityfitur yang ada , tetapi tidak seperti yang Anda pikirkan: cukup buat elemen baru dengan warna gelap pekat, letakkan di atas gambar Anda, dan hapus menggunakan opacity. Efeknya adalah gambar di belakang digelapkan.

Terakhir, Anda dapat memeriksa dukungan browser di filter sini .

Spudley
sumber
32

OP ingin mengurangi kecerahan, bukan meningkatkannya. Opacity membuat gambar terlihat lebih cerah, bukan lebih gelap.

Anda dapat melakukan ini dengan melapisi div hitam di atas gambar dan mengatur opasitas div itu.

<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
sumber
24
Opacity tidak membuat apapun lebih terang atau lebih gelap. Ini mengubah transparansi objek. Apakah ini berpengaruh atau tidak untuk membuat sesuatu menjadi lebih cerah atau lebih gelap akan bergantung pada warna latar belakang item yang Anda ubah opasitasnya. Bertentangan dengan apa yang Anda katakan, Anda dapat membuat sesuatu menjadi lebih gelap dengan meningkatkan opacity jika Anda meletakkannya di latar belakang hitam. Gambar transparan 99% pada latar belakang hitam akan tampak hampir hitam. Oleh karena itu, saya tidak melihat mengapa div overlay terpisah diperlukan. Anda bisa mengaturnya di BG hitam. Misalnya: jsbin.com/isemec/1/edit
NickG
@NickG Saya mengatakan itu dengan asumsi latar belakang putih. Apa yang telah Anda lakukan adalah hal yang sama dengan kode saya, hanya saja saya meletakkan hamparan hitam semi transparan di atas gambar dan Anda memiliki latar belakang hitam buram dengan gambar semi transparan di atasnya.
sachleen
17

Singkatnya, letakkan hitam di belakang gambar, dan turunkan kekeruhan. Anda dapat melakukan ini dengan membungkus gambar di dalam div, dan kemudian menurunkan opasitas gambar.

Sebagai contoh:

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

Ini adalah JSFiddle.

JL235
sumber
15

Anda bisa menggunakan:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
Nahomy Atias
sumber
9
Kebijakan "ayo buang prefiks untuk berjaga-jaga" ini salah. Pertama, jika Opera mendukungnya, tidak akan ada -o-(Opera menggunakan Webkit / Blink sekarang), kedua, Firefox langsung beralih ke non-prefiks filter, ketiga, urutan Anda salah, non-prefiks harus menjadi yang terakhir, keempat, sintaks untuk IE -ms-filterberbeda ( progid:DXImageTransform, dll), kelima, sintaks untuk Firefox berbeda dan membutuhkan SVG ( Lihat dokumen ), keenam, fitur-fitur baru sepertinya tidak akan diawali karena vendor menyadari betapa buruknya sebuah ide
Camilo Martin
5
@CamiloMartin, semestinya Anda memberikan jawaban yang lebih lengkap untuk pertanyaan ini karena belum dijawab secara lengkap.
Wes Modes
-webkit-filter: brightness () / -webkit-filter: contrast () berfungsi. Ini adalah jawaban yang tepat untuk pertanyaan itu.
Shilpa
Anda dapat menggunakannya dalam sass mixin seperti ini: gist.github.com/johnferrie/3836468
Erez Lieberman
6

Dengan CSS3 kita dapat dengan mudah mengatur gambar. Tapi ingat ini tidak mengubah gambar. Ini hanya menampilkan gambar yang disesuaikan.

Lihat kode berikut untuk lebih jelasnya.

Untuk membuat gambar menjadi abu-abu:

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

Untuk memberikan tampilan sepia:

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

Untuk mengatur kecerahan:

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

Untuk mengatur kontras:

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

Untuk mengaburkan gambar:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
Raj Sharma
sumber
1
Harap jangan memposting jawaban yang persis sama untuk beberapa pertanyaan: itu tidak cocok untuk semua atau pertanyaan adalah duplikat yang harus ditandai / ditutup seperti itu.
kleopatra
3

Saya menemukan ini hari ini. Itu sangat membantu saya. http://www.propra.nl/playground/css_filters/

Yang Anda butuhkan hanyalah menambahkan ini ke gaya css Anda .:

div {-webkit-filter: brightness(57%)}
Spirit In Motion
sumber
2

Jika Anda memiliki gambar latar belakang, Anda dapat melakukan ini: Setel gradien rgba () pada gambar latar belakang.

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

Sébastien Gicquel
sumber
luar biasa. Saya membutuhkan solusi untuk menggelapkan gambar latar belakang dan semua jawaban lainnya menggelapkan seluruh div.
nuander
1

Anda dapat menggunakan filter css, di bawah dan contoh untuk web-kit. silakan lihat contoh ini: http://jsfiddle.net/m9sjdbx6/4/

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

coba ini jika Anda perlu mengubah gambar hitam menjadi putih:

.classname{
    filter: brightness(0) invert(1);
}
Rizo
sumber
-3

Suka

.classname
{
 opacity: 0.5;
}
Satinder singh
sumber
terima kasih tapi itu meningkatkan kecerahan bukan menguranginya !!
Shadi
Itu tergantung dari warna background.
kiamat
kanan @zgnilec tergantung dari warna background ... jika di taruh hitam kecerahan gambar akan berkurang
Shadi
ini tidak berfungsi untuk meningkatkan kecerahan lebih dari 100%, opasitas hanya bisa mencapai 1
Javis Perez
Sebagai pembicara non-Inggris, saya sebenarnya ingin mencari "opacity" dan mendapatkan usulan jawaban ini. Bahkan jika jawaban ini tidak menjawab pertanyaannya, ada baiknya mengetahui bahwa opacitymeningkatkan kecerahan. ;)