微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用CSS变暗(任何形状)

所以我已经看到了很多方法来使CSS变暗,包括圆角的图像,但是我的问题是不同的.

假设我有一个.png的图像看起来像一只小狗(只是随它一起,我没有任何好的例子),当我把它放在我的页面上,我给它的尺寸为100 x 100.

但是,我不能只是重叠一些东西,或者使整个图像变色,因为这样会使狗的背景也变暗,这看起来很丑陋.

是否可以使用CSS来绘制任意形状的图像?

(我假设你明白我的观点,没用的代码是不必要的)

谢谢!

解决方法

你可以随时改变图像的不透明度,考虑到任何替代品的难度,这可能是最好的方法.

CSS:

.tinted { opacity: 0.8; }

如果您对更好的浏览器兼容性感兴趣,建议您阅读以下内容

http://css-tricks.com/css-transparency-settings-for-all-broswers/

如果你的确足够你可以让这个工作尽可能早的IE7(谁知道!)

注意:正如JGonzalezD指出的,如果背景颜色通常比图像本身更暗,则这只会使图像变暗.尽管如果您没有特别想要使图像变暗,这种技术可能仍然有用,而是希望以悬停/焦点/其他状态突出显示它.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。