css怎么在图片上显示遮罩层


本文摘自PHP中文网,作者coldplay.xixi,侵删。

css在图片上显示遮罩层的方法:首先检查图像容器和图像样式,并查看遮罩层的样式定义;然后添加用于鼠标移动的脚本代码以显示遮罩层;最后添加mouseover和mouseout事件即可。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css在图片上显示遮罩层的方法:

1.首先,看一下HTML,一个img图像控件和一个带有样式的div,其中包含文本。这个就是蒙版遮罩层。

ca4b16a4eda8aff1ca10f88ac73b803.png

2.然后,查看样式定义。先检查图像容器和图像样式,如图所示。其中要注意的是img_container样式里定义了position:relative,这个主要是为了遮罩层做绝对定位做准备的。

e6db04bfdc6100165182517edc15195.png

3.接着,查看遮罩层的样式定义。该代码如图所示。

背景:rgba(0,0,0,0.7);

可以通过修改以下数字0.7来更改透明度。 1是完全不透明的,0是完全透明的。

060d0e73886b6be1ded09672c0a38ef.png

阅读剩余部分

相关阅读 >>

css布局之静态布局、自适应布局、流式布局、响应式布局、弹性布局

css span标签里text-indent不起作用是什么原因?

css怎么设置上边框

css伪类是什么

如何新建一个css样式文件

css a为什么设不了宽度

css link与import的区别是什么

css描边属性是什么

css怎么调整行间距

css怎么实现图片居中

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...