HTML让一张图片变暗,css怎么让图片变暗? | 您所在的位置:网站首页 › 阴暗的背景图片 › HTML让一张图片变暗,css怎么让图片变暗? |
CSS怎么让图片变暗?下面本篇文章就来给大家介绍一下使用CSS让图片变暗的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 在CSS中,可以利用滤镜filter属性,通过设置filter属性为brightness(%)和contrast(%)来让图片变暗。 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。 语法: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 提示:使用空格分隔多个滤镜。 注意:滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。 首先,我们先建立一个demo,代码如下: css3 filter滤镜.demo{ width: 400px; height: 300px; margin: 50px auto; } 效果是这样的(没有加任何滤镜效果): 使用filter:brightness(%)---设置图片亮度 .demo img{ -webkit-filter: brightness(50%); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */ filter: brightness(50%); /* 设置图片的亮度,使其看起来更亮或更暗。如果值是0%,图像会全黑;值是100%,则图像无变化; 值是100%以上,则图像更亮*/ } 效果图: 使用filter:contrast(%)---设置图片对比度 .demo img{ -webkit-filter: contrast(50%); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */ filter: contrast(50%); /* 设置图片对比度,值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%, 意味着会运用更低的对比。若没有设置值,默认是1。*/ } 效果图: |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |