悬停时图像的底部边缘出现一条白线

Posted 2023-03-06

【中文标题】悬停时图像的底部边缘出现一条白线

【英文标题】：A white line is appearing on bottom edge of the image on hover

【发布时间】：2021-04-08 17:34:26

【问题描述】：

我遇到了出现在“div 类库”内每个图像底部的白色像素线的问题。鼠标悬停时出现白线[我在悬停时包含了变换元素]

此外，这些图像仅包含在“galary”和“photo”类中，而不包含在任何其他类中。

代码如下：

div.photo 
  height: 2rem;
  transition: transform .2s;


.photo:hover 
  transform: scale(0.9);
  cursor: pointer;
  box-shadow: 15px 15px 15px;


.gallary 
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2em;

<div class="gallary">
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=1"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=2"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=3"></div>
</div>

【参考方案1】：

从 .photo 中删除 box-shadow 并添加到图像中：

 div.photo 
height: 2rem;
transition: transform .2s;

.photo:hover 
transform: scale(0.9);
cursor: pointer;

.photo:hover img
  box-shadow:  15px 15px 15px;

.gallary 
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2em;

    <div class="gallary"> 
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
    </div>

【参考方案2】：

尝试将图像放在有边框的<div> 元素中，您会在图像底部看到一个额外的空白区域（大约 3 像素）。发生这种情况是因为图像是内联元素，因此浏览器会在基线下添加一些空白来调整其他内联元素。摆脱这种情况的最简单方法是将图像的默认显示值从 inline 更改为 block，即将样式 display: block; 应用于图像。