首頁 > web前端 > css教學 > css怎麼設定圖片的對比度

css怎麼設定圖片的對比度

王林
發布: 2020-11-12 09:50:24
原創
2500 人瀏覽過

css設定圖片的對比的方法:可以利用【filter:contrast(%)】屬性來設定圖片的對比度,如【filter:contrast(0%)】。 filter屬性定義了元素的可視效果,如模糊、飽和度、對比等。

css怎麼設定圖片的對比度

屬性介紹:

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板