css怎麼設定圖片的對比度

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。   

範例：

nbsp;HTML>

	
	<meta>
	<style>
		img{
			width: 200px;
		}
		.img1{
			/*没有滤镜效果*/
			
			/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
			-webkit-filter: none; 
			filter: none;
		}
		.img2{
			/*调整元素的对比度*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: contrast(30);
			filter: contrast(30);
		}
	</style>
	
	
		<div>
			<img  class="img1 lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="css怎麼設定圖片的對比度" >
			<img  class="img2 lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="css怎麼設定圖片的對比度" >
		</div>
	

相關建議：CSS教學

以上是css怎麼設定圖片的對比度的詳細內容。更多資訊請關注PHP中文網其他相關文章！