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中文网其他相关文章!