Spu*_*ley 160
您正在寻找的功能是filter.它能够执行一系列图像效果,包括亮度:
#myimage {
filter: brightness(50%);
}
你可以在这里找到一篇有用的文章:http://www.html5rocks.com/en/tutorials/filters/understanding-css/
另一个:http://davidwalsh.name/css-filters
最重要的是,W3C规范:https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
请注意,这是最近才进入CSS作为功能的东西.它是可用的,但大量的浏览器在那里将不会支持它,和那些支持它会要求供应商名称(即-webkit-filter:,-moz-filter等).
也可以使用SVG进行这样的滤镜效果.SVG对这些效果的支持已经很好地建立并得到广泛支持(CSS过滤器规范取自现有的SVG规范)
另请注意,这不应与filter旧版IE中可用的专有样式混淆(尽管我可以预测新样式丢弃其供应商前缀时命名空间冲突的问题).
如果这些都不适合你,你仍然可以使用现有的opacity功能,但不是你想的方式:只需创建一个深色实色的新元素,将其放在图像上,然后使用淡出淡出opacity.效果将是黑暗背后的形象.
最后,您可以在filter 此处查看浏览器支持.
希望有所帮助.
sac*_*een 31
OP希望降低亮度,而不是增加亮度.不透明度使图像看起来更亮,而不是更暗.
您可以通过在图像上覆盖黑色div并设置该div的不透明度来实现此目的.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
JL2*_*235 17
简而言之,在图像后面放置黑色,并降低不透明度.您可以通过将图像包装在div中,然后降低图像的不透明度来完成此操作.
例如:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
这是一个JSFiddle.
小智 15
你可以使用:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
使用CSS3,我们可以轻松调整图像.但请记住,这不会改变图像.它仅显示调整后的图像.
有关详细信息,请参阅以下代码.
要使图像变灰:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
给棕褐色看:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
调整亮度:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
调整对比度:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
模糊图像:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
| 归档时间： |
|
| 查看次数： |
193969 次 |
| 最近记录： |