有个朋友有这样一个需求，在一张图片上放置一个半透明的遮罩层，当鼠标悬停其上，减少遮罩的透明度，让图片显示更清晰，效果图如下：

简化HTML如下：

Mask Text

CSS样式文件如下：

.item {width: 200px;margin: 100px auto;position: relative;overflow: hidden;background: yellow;}.item img {width: 100%;max-width: 100%;}.mask {position: absolute;top: 0;bottom: 0;width: 100%;width:50%;padding-top: 49%;color: #fff;text-align: center;background: rgba(0, 0, 0, 0.5);background: red;}.mask:hover {background: rgba(0, 0, 0, 0.1);}

最终得到的效果为(查看错误示例)：

为了让bug更为明显，将遮罩层的宽度设置成50%，背景颜色为red，无透明度，同时将包含块.item背景设置为黄色。效果如下：

可见，包含块的的高度与遮罩层等高，却比图片高度多出几像素。

分析

遮罩层已经设置了绝对定位，已经被移出正常的文档流，上下紧贴父元素，它的高度取决于父元素，并且无法影响父元素。

而作为父元素的.item只有一个子元素，就是图片。所以，影响父元素高度只能是图片元素。

为了测试图片元素，先把图片元素替换成段落文本，发现一切正常。所以，确定是图片影响了父元素的高度。

原因

因为图片是行内(inline)元素，而行内元素涉及到一个垂直方面对齐(vertical align)的问题。比如一行文字：

行内元素vertical-align默认值为：baseline。即默认情况下，会把图片当成sphinx单词中的字母s、n、x，会自动预留一定位置给p字母这样的元素。效果如下：

解决办法

将图片属性值 vertical-align:middle或bottom
将图片转化为块级(block)元素

参考资料

css – HTML 5 strange img always adds 3px margin at bottom – Stack Overflow
vertical-align – CSS: Cascading Style Sheets | MDN

css遮罩层从下往上_CSS:图片自带3px下边距的bug修复相关推荐

CSS遮罩层：hover状态丢失及解决方案
CSS遮罩层,顾名思义就是在div上,再"铺"一层半透明的div.在hover时,亦可进一步改变该遮罩层的色彩和透明度.我们可以通过css定位和背景色实现. CSS遮罩层实现及ho ...
html中鼠标经过遮罩消失,CSS遮罩层：hover状态丢失及解决方案
CSS遮罩层,顾名思义就是在div上,再"铺"一层半透明的div.在hover时,亦可进一步改变该遮罩层的色彩和透明度.我们可以通过css定位和背景色实现. CSS遮罩层实现及ho ...
网络通信原理与IP地址的分配原理，网络七层由下往上分别为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层
互联网协议入门介绍:https://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html 每一层要进行通信,每一层都 ...
[css] 怎样去除图片自带的边距？
[css] 怎样去除图片自带的边距? 空隙产生的原因,换行符,空格符,制表符等你空白符,字体不为0的情况下,都会产生一个字符的空隙,空格符好会占据一定宽度,使用inline-block会产生元素间的空 ...
2023最新站长必备在线工具箱系统源码含上百款工具带后台版本自适应模板优化修复版
简介: 2023最新站长必备在线工具箱系统源码含上百款工具带后台版本自适应模板优化修复版刀客搭建看了一下,系统一切正常可用,就是后台登录方式这一块使用的是QQ扫码登录的,建议有能力的可以改一 ...
html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
css设置div从下到上显示,科技常识：css制作从下往上逐渐显示的div
今天小编跟大家讲解下有关css制作从下往上逐渐显示的div ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css制作从下往上逐渐显示的div 的相关资料,希望小伙伴们看了有所帮助. htm ...
最新站长必备在线工具箱系统源码/含上百款工具/带后台版本/自适应模板/优化修复版
最新站长必备在线工具箱系统源码,基于Thinkphp内核开发,含上百款工具,带后台版本:自适应模板,优化修复版.站长搭建看了一下,系统一切正常可用,就是后台登录方式这一块使用的是QQ扫码登录的,建议有 ...
纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...

css遮罩层从下往上_CSS:图片自带3px下边距的bug修复

分析

原因

解决办法

参考资料

css遮罩层从下往上_CSS:图片自带3px下边距的bug修复相关推荐

最新文章

热门文章