CSS Resim opaklığı özelliği sayesinde sitemize eklediğimiz resimlerin opaklık değerlerini değiştirebiliriz. Kendi isteğinize göre ister en opak halini ister orta halini belirleyebilirsiniz.
Resim opaklığı için opacity etiketi kullanılır.
Resim opaklığının değerini 0.1 – 1 değerleri arasında belirtebiliriz. Yukarıda ki resimde 3 farklı değer arasında ki opaklık farkını görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <style> .resim1 { opacity: 0.1; } .resim2 { opacity: 0.5; } .resim3 { opacity: 1; } </style> </head> <body> <img class="resim1" src="resim.jpg"/> <img class="resim2" src="resim.jpg"/> <img class="resim3" src="resim.jpg"/> </body> </html> |
Örnekler ile resim opaklığını yakından inceleyelim.
Resim opaklığı 0.1 değerinde olacak şekilde ayarlayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style> img { opacity: 0.1; } </style> </head> <body> <img src="resim.jpg"/> </body> </html> |
Opak hali
Orijinali
Resim opaklığı 0.7 değerinde olacak şekilde ayarlayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style> img { opacity: 0.7; } </style> </head> <body> <img src="resim.jpg"/> </body> </html> |
Opak hali
Orijinali
