为图片添加半透明遮罩效果

平时为图片添加半透明遮罩效果，我的做法如下：
利用标签i实现背景半透明遮罩。当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6)

<p class="opacity-black-position"><a href="#"><img src="data:images/4601.jpg" alt=""><i></i></a></p>

为html结构添加如下css样式：

/* 利用标签i实现背景半透明遮罩, 兼容性不好 */
.opacity-black-position { width: 460px; height: 460px; position: relative; }
.opacity-black-position i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); transition: background-color .5s;
}
.opacity-black-position a:hover i { background-color: rgba(0, 0, 0, .6); }

利用opacity简单实现

昨天看到京东商品图片上的半透明黑色遮罩，是这样实现的。当hover时设置a的透明度为0.4

<p class="opacity-black"><a href="#"><img src="data:images/4601.jpg" alt=""></a></p>

为html结构添加如下css样式:

.opacity-black { width: 460px; height: 460px; background-color: #000; }
.opacity-black a { transition: opacity .5s; opacity: 1; }
.opacity-black a:hover { opacity: 0.4; }

通过降低自身a及子标签img的透明度来显示父辈容器的背景色, 达到的效果和上面是一样一样的。

狠狠滴点这里(演示): http://codepen.io/mackxu/pen/mJtvh

转载于:https://www.cnblogs.com/mackxu/p/image-opacity.html

为图片添加半透明遮罩效果相关推荐

html背景图片半透明遮罩,BufferedImage在图片添加半透明遮罩层
利用BufferedImage处理图片时,例如生成海报往添加图片加文字,由于背景图颜色差异不统一,需要加入纯色半透明遮罩层后,再往上面添加文字. 以下代码演示:在图片底部加入一条高度20的半透明遮罩层 ...
jquery 半透明遮罩效果小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
python 添加半透明水印_如何利用python给图片添加半透明水印
前言本文主要给大家介绍了关于python图片添加半透明水印的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧示例代码: # coding:utf-8 from PIL im ...
python 添加半透明水印_怎么利用python给图片添加半透明水印
前言本文主要给大家简介了关于python图片添加半透明水印的相关资料,共享出来供大家参考学习,下面话不多说了,来一起看看具体的简介吧示例代码: # coding:utf-8 from PIL im ...
QT 轻松实现半透明遮罩效果
一.背景有时候我们需要实现下面的半透明遮罩效果,以便突出子窗口. 二.实现原理 1.总共分为三层:主窗口(Form).遮罩.显示窗口. 2.主窗口的子窗口是遮罩,遮罩的子窗口是显示窗口. 3.遮罩设 ...
html 图片添加遮罩层,jQuery图片添加渐变遮罩层插件
这是一款jQuery图片添加渐变遮罩层插件.通过该插件,可以为一副背景图片添加指定的渐变遮罩层.该插件支持CSS mix-blend-mode混合模式. 使用方法在页面中引入jquery和jquer ...
python给图片加半透明水印_图片添加半透明文字水印 Python
效果 python marker.py -f ./input/test.png -m '添加水印' 功能使用知名python图片处理库PIL,为图片添加文字水印. 实现步骤:根据文字生成水印图片: ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
半透明遮罩效果 DIV
1.用JS判断你的显示器分辨率: var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; ,获取 ...

为图片添加半透明遮罩效果

利用opacity简单实现

为图片添加半透明遮罩效果相关推荐

最新文章

热门文章