How to set the contrast of an image in css

How to set the contrast of an image in css: You can use the [filter:contrast(%)] attribute to set the contrast of an image, such as [filter:contrast(0%)]. The filter attribute defines the visual effect of the element, such as blur, saturation, contrast, etc.

Attribute introduction:

The filter attribute defines the visual effect (for example: blur and saturation) of the element (usually ) Spend).

(Learning video recommendation: css video tutorial)

Syntax:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

contrast(%) Adjust the contrast of the image. If the value is 0%, the image will be completely black. The value is 100% and the image is unchanged. Values ​​can exceed 100%, meaning a lower comparison will be used. If no value is set, the default is 1.

Example:

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="How to set the contrast of an image in css" >
			<img  class="img2 lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="How to set the contrast of an image in css" >
		</div>
	

Related recommendations: CSS tutorial

The above is the detailed content of How to set the contrast of an image in css. For more information, please follow other related articles on the PHP Chinese website!