css設定圖片的對比的方法:可以利用【filter:contrast(%)】屬性來設定圖片的對比度,如【filter:contrast(0%)】。 filter屬性定義了元素的可視效果,如模糊、飽和度、對比等。
屬性介紹:
filter 屬性定義了元素(通常是)的視覺效果(例如:模糊與飽和度)。
(學習影片推薦:css影片教學)
文法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
contrast(%) 調整影像的對比。數值是0%的話,影像會全黑。值是100%,影像不變。值可以超過100%,代表會運用更低的對比。若沒有設定值,預設是1。
範例:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style type="text/css"> img{ width: 200px; } .img1{ /*没有滤镜效果*/ /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */ -webkit-filter: none; filter: none; } .img2{ /*调整元素的对比度*/ /*考虑浏览器兼容性:兼容Chrome,Safari,Opera*/ -webkit-filter: contrast(30); filter: contrast(30); } </style> </head> <body> <div class="demo"> <img src="1.jpg" class="img1"/> <img src="1.jpg" class="img2"/> </div> </body> </html>
相關建議:CSS教學
以上是css怎麼設定圖片的對比度的詳細內容。更多資訊請關注PHP中文網其他相關文章!