Question

我有一些图像，我使用CSS来制作更暗的背景。这会使图像在悬停时变暗。可以在主图像上的 rtsb.co.uk 上看到。

然而，在查看图像时，背景略微显示在图像后面，在每个图像下看作灰色条纹。图像的高度为600px，但出于某种原因，“外链”的代码为使其高度为607像素，因此显示条形图，可以在查看页面时使用Chrome开发工具查看。

＆＃13;

.outerLink {
  background-color: #e8e8e8;
  display: block;
  opacity: 1;
  filter: alpha(opacity=100);
}
img.darkableImage {
  opacity: 1;
  filter: alpha(opacity=100);
}

＆＃13;

<a href="/collections/sale" class="outerLink">
  <img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>

＆＃13;

我已经尝试过查看所有内容以找到添加7px的地方，但我无法在任何地方找到它。

即使我将CSS的名称更改为.outerLinktest，上面的标记似乎仍然从某处获得了19px的高度。

我无法将高度CSS属性添加到.outerLink，因为页面对于移动设备等是动态的，并且图像会因此而调整大小，因此不会总是高600px。

Answer 1

在img class上使用display:block;。

img.darkableImage 
{
    opacity:1;
    filter:alpha(opacity=100);
    display:block;
}

摘录：

＆＃13;

.outerLink 
    {
        background-color:#e8e8e8; 
        display:block; 
        opacity:1;
        filter:alpha(opacity=100);
    }

    img.darkableImage 
    {
        opacity:1;
        filter:alpha(opacity=100);
        display:block;
    }

＆＃13;

<a href="/collections/sale" class="outerLink">
    <img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>

＆＃13;

检查Fiddle

Answer 2

你有没有尝试过

display:flex;

而不是

display:block;

在outerLink中

？

.outerLink {
    background-color: #e8e8e8;
    display: flex;
    opacity: 1;
    filter: alpha(opacity=100);
}

我已经和检查员一起尝试过它。

段：

＆＃13;

.outerLink {
  background-color: #e8e8e8;
  display: flex;
  opacity: 1;
  filter: alpha(opacity=100);
}
img.darkableImage {
  opacity: 1;
  filter: alpha(opacity=100);
  display: block;
}

＆＃13;

<a href="/collections/sale" class="outerLink">
  <img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>

＆＃13;

Answer 3

也可以显示图像：块;

img.darkableImage 
{
    opacity:1;
    filter:alpha(opacity=100);

    display:block; /*<----*/
}

或将外链接背景颜色更改为白色可能......

Answer 4

您可以为您的班级设置位置属性：

.outerLink 
{
    background-color:#000; 
    display:block; 
    opacity:1;
    filter:alpha(opacity=100);
    position:absolute;
}

img.darkableImage 
{
    opacity:1;
    filter:alpha(opacity=100);
    position: relative;
    top:0;
    left:0;
}

CSS图像变暗，将额外的7px添加到底部

4 个答案: