Hapus gambar dengan CSS?

183

Apa cara terbaik (jika ada) untuk membuat gambar tampak "abu-abu" dengan CSS (yaitu, tanpa memuat versi gambar yang terpisah dan berwarna abu-abu)?

Konteks saya adalah bahwa saya memiliki baris dalam tabel yang semuanya memiliki tombol di sel paling kanan dan beberapa baris perlu terlihat lebih ringan daripada yang lain. Jadi saya dapat membuat font lebih ringan tentu saja tetapi saya juga ingin membuat gambar lebih ringan tanpa harus mengelola dua versi setiap gambar.

Richard Poirier
sumber

Jawaban:

234

Apakah itu harus abu-abu? Anda bisa mengatur opacity dari gambar lebih rendah (untuk menumpulkannya). Atau, Anda dapat membuat a<div> overlay dan mengaturnya menjadi abu-abu (ubah alfa untuk mendapatkan efek).

  • html:

    <div id="wrapper">
        <img id="myImage" src="something.jpg" />
    </div>
  • css:

    #myImage {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
    }
    
    /* or */
    
    #wrapper {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
        background-color: #000;
    }
Owen
sumber
6
Penjelajah internet yang bagus. Anda dapat berbuat lebih banyak dengan atribut filter; karena menggunakan DirectDraw untuk melakukan rendering. Tapi, maka itu hanya berfungsi pada IE
saya harus menggunakan jQuery .. saya melakukan $ ("# imgid"). filter.opacity = "0,3"
Avdhut Vaidya
183

Gunakan properti filter CSS3:

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

Dukungan browser agak buruk tetapi 100% CSS. Artikel bagus tentang properti filter CSS3 dapat Anda temukan di sini: http://blog.nmsdvid.com/css-filter-property/

nmsdvid
sumber
9
untuk membuatnya lebih gelap, tambahkan contrast(x%)properti, mis grayscale(100%) contrast(30%).
Dennis Golomazov
3
Dukungan browser adalah masalah nyata karena pasti tidak berfungsi di IE10, IE11, FF26, Safari 5.1.x (Win7 x64), atau pada dasarnya apa pun di luar Chrome (contoh.)
nickb
2
Ini tidak memungkinkan Anda untuk mengaturnya menjadi abu-abu terang, tetapi jika pada latar belakang putih, Anda dapat menggunakannya menggunakannya bersama dengan opacity untuk mewujudkannya; img { filter: grayscale(100%); opacity: 0.4; }
Ezward
53

Kamu disini:

<a href="#"><img src="img.jpg" /></a>

Css Grey:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Belum ditampilkan:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

Saya menemukannya di: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Sunting: IE10 + tidak mendukung filter DX seperti yang dilakukan IE9 dan sebelumnya, juga tidak mendukung versi sebelumnya dari filter abu-abu. Anda dapat memperbaikinya, gunakan satu dari dua solusi di bawah ini:

  1. Setel IE10 + untuk di-render menggunakan mode standar IE9 menggunakan elemen meta berikut di kepala: <meta http-equiv="X-UA-Compatible" content="IE=9">
  2. Gunakan overlay SVG di IE10 untuk menyelesaikan penjelajah internet greyscaling 10 - bagaimana menerapkan filter grayscale?
Sakata Gintoki
sumber
1
Terima kasih! Ini adalah satu-satunya jawaban yang membantu saya menjalankan ini di Firefox!
Jamie Carl
@ Jamie Carl: Senang saya bisa membantu. Kode ini berfungsi baik di semua Peramban :)
Sakata Gintoki
@ErenYeager di ungray, mengapa zoom: 1? Saya kira itu kesalahan?
para
24

Jika Anda tidak keberatan menggunakan sedikit JavaScript, fadeTo () jQuery berfungsi dengan baik di setiap browser yang saya coba.

jQuery(selector).fadeTo(speed, opacity);
Nathan Long
sumber
5
Baru saja menemukan jawaban lamaku di sini lagi. Tidak mungkin saya menggunakan JS untuk ini sekarang. CSS murni jauh lebih baik.
Nathan Long
20

Lebih baik mendukung semua browser:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}
alexmeia
sumber
Whoah! Tidak ada pembungkus. Terima kasih!
Pavel Vlasov
3

Berikut ini contoh yang memungkinkan Anda mengatur warna latar belakang. Jika Anda tidak ingin menggunakan float, maka Anda mungkin perlu mengatur lebar dan tinggi secara manual. Tetapi itu pun sangat tergantung pada CSS / HTML di sekitarnya.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>
Dave Jensen
sumber
3

Menjadi abu-abu:

"Untuk mencapai achromatize."

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}
<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

"Mengisi dengan abu-abu."

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}
<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>


Catatan yang bermanfaat

Константин Ван
sumber
1
Kontras adalah apa yang saya inginkan
Simon Zyx
1

Anda dapat menggunakan rgba()css untuk menentukan warna, bukan rgb(). Seperti ini: style='background-color: rgba(128,128,128, 0.7);

Memberimu warna yang sama dengan rgb(128,128,128) tetapi dengan opacity 70% sehingga barang-barang di belakang hanya menunjukkan melalui 30%. Tapi CSS3 berfungsi di sebagian besar browser sejak 2008. Maaf, tidak ada sintaks #rrggbb yang saya ketahui. Bermainlah dengan angka - Anda bisa mencuci dengan putih, bayangan dengan abu-abu, apa pun yang ingin Anda encerkan.

OK jadi Anda membuat persegi panjang abu-abu semi-transparan (atau warna apa pun) dan meletakkannya di atas gambar Anda, mungkin dengan posisi: absolut dan indeks-z lebih tinggi dari nol, dan Anda meletakkannya tepat sebelum gambar dan default lokasi untuk persegi panjang akan menjadi sudut kiri atas gambar Anda. Harus bekerja

OsamaBinLogin
sumber
0

Menimbang filter: ekspresi adalah ekstensi Microsoft ke CSS, jadi itu hanya akan berfungsi di Internet Explorer. Jika Anda ingin menghapusnya, saya sarankan Anda mengatur opacity menjadi 50% menggunakan sedikit javascript.

http://lyxus.net/mv akan menjadi tempat yang baik untuk memulai, karena membahas skrip opacity yang berfungsi dengan Firefox, Safari, KHTML, Internet Explorer, dan browser yang mendukung CSS3.

Anda mungkin juga ingin memberinya batas abu-abu.

VONC
sumber
opacity adalah fitur css3, bagian filter untuk MSIE secara khusus, browser lain akan mengambil opacity
Owen