Html 如何将一个图像直接放置在另一个图像上？

目的是使灰色图像在悬停时被蓝色覆盖（以便灰色图像成为蓝色图像）

目前，蓝色图像偏离中心，因此不直接位于灰色上方

HTML

---

提前欢呼

将

位置：相对

添加到

.iconContainer

中，以便覆盖图像上的绝对位置将相对于其父图像。然后使用

top:0；左：50%；转化：translateX（-50%）以将其像其他图像一样定位在容器的中心


.footer容器{
边框顶部：rgba（0,0,0,0.8）2px实心；
身高：5雷姆；
显示器：flex；
背景色：#E5；
背景尺寸：封面；
保证金：0；
填充：0；
文本对齐：居中；
位置：相对位置；
}
.iconContainer{
宽度：20%；
保证金：自动；
位置：相对位置；
}
/*灰色图像*/
.homeIcon{
文本对齐：居中；
高度：71px；
保证金：自动；
位置：相对位置；
}
博士{
文本对齐：居中；
高度：58px；
保证金：自动；
位置：相对位置；
}
.新闻图标{
文本对齐：居中；
高度：64px；
保证金：自动；
位置：相对位置；
}
.eventIcon{
文本对齐：居中；
高度：80px；
保证金：自动；
位置：相对位置；
}
社会党{
文本对齐：居中；
高度：80px；
保证金：自动；
位置：相对位置；
}
/*盘旋*/
/*蓝色图像*/
霍米肯霍夫酒店{
文本对齐：居中；
高度：71px；
保证金：自动；
不透明度：0；
位置：绝对位置；
左：50%；
排名：0；
转化：translateX（-50%）；
}
.iconContainer:悬停。homeIconHover{
不透明度：1；
}
.iconContainer:悬停.homeIcon{
不透明度：0；
}
magIconHover先生{
文本对齐：居中；
高度：58px；
保证金：自动；
不透明度：0；
位置：绝对位置；
}
.iconContainer:hover.magIconHover{
不透明度：1；
}
.iconContainer:hover.magIcon{
不透明度：0；
}
.newsIconHover{
文本对齐：居中；
高度：64px；
保证金：自动；
不透明度：0；
位置：绝对位置；
}
.iconContainer:悬停。新闻IConhover{
不透明度：1；
}
.iconContainer:悬停。新闻图标{
不透明度：0；
}
.eventIconHover{
文本对齐：居中；
高度：80px；
保证金：自动；
不透明度：0；
位置：绝对位置；
}
.iconContainer:悬停.eventIconHover{
不透明度：1；
}
.iconContainer:hover.eventIcon{
不透明度：0；
}
.哈弗{
文本对齐：居中；
高度：80px；
保证金：自动；
不透明度：0；
位置：绝对位置；
}
.iconContainer:hover.socialIconHover{
不透明度：1；
}
.iconContainer:hover.socialIcon{
不透明度：0；
}

只是一个“开箱即用”的答案。您首先不需要第二个图像，而是可以使用过滤器来实现相同的效果

下面是两种不同的方法。有很好的支持，并使用常规图像，目前还没有supportwise（谢谢，Microsoft！），但使用背景图像


#一个{
背景图像：url（'http://lorempixel.com/200/100/sports/1');
背景颜色：蓝色；
背景混合模式：屏幕；
宽度：200px；高度：100px；
右边距：10px；
浮动：左；
}
#一：悬停{
背景色：透明；
}
#两个{
背景色：红色；
高度：100px；宽度：200px；
浮动：左；
}
#两个img{
滤镜：灰度（100%）；
不透明度：.5；
}
#两个img：悬停{
滤镜：灰度（0%）；
不透明度：1；
}
将图像悬停：
相反，您可以使用css将所有图像的颜色更改为黑白

看看兼容性
另一种选择是对图标使用SVG，并在悬停时设置
填充的样式。是可伸缩的矢量图形，因此在任何设备分辨率或比例下都保持清晰

下面是一个简单的例子：


svg{width:20%}
svg路径{
填充物：灰色；
}
svg：悬停路径{
填充：蓝色；
}

家
书
你有你的想法的一些例子吗？我在上面添加了一个例子，说明它目前看起来如何。我将尝试一下，因为它将大大简化代码，谢谢你的反馈。你投了反对票吗？我想该线程中的每个人都投了反对票。
<div class="footerContainer">
    <div class="iconContainer">
        <img class="homeIcon" src="images/Home Icon.png"/>  <!--grey image-->
        <img class="homeIconHover" src="images/Home Icon blue.png"/>  <!--blue image-->
    </div>

    <div class="iconContainer">
        <img class="magIcon" src="images/Magazine Icon.png"/>
        <img class="magIconHover" src="images/Magazine Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="newsIcon" src="images/News Icon.png"/>
        <img class="newsIconHover" src="images/News Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="eventIcon" src="images/Event Icon.png"/>
        <img class="eventIconHover" src="images/Event Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="socialIcon" src="images/Social Icon.png"/>
        <img class="socialIconHover" src="images/Social Icon blue.png"/>
    </div>
</div>

.footerContainer{
    border-top: rgba(0,0,0,0.8) 2px solid;
    height: 5rem;
    display: flex;
    background-color: #e5e5e5;
    background-size: cover;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
}

.iconContainer{
    width: 20%;
    margin: auto;
}

/* grey images */

.homeIcon{
    text-align: center;
    height: 71px;
    margin: auto;
    position: relative;
}

.magIcon{
    text-align: center;
    height: 58px;
    margin: auto;
    position: relative;
}

.newsIcon{
    text-align: center;
    height: 64px;
    margin: auto;
    position: relative;
}

.eventIcon{
    text-align: center;
    height: 80px;
    margin: auto;
    position: relative;
}

.socialIcon{
    text-align: center;
    height: 80px;
    margin: auto;
    position: relative;
}


/* HOVER */

/* blue images */

.homeIconHover{
    text-align: center;
    height: 71px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .homeIconHover{
    opacity: 1;
  }

.iconContainer:hover .homeIcon{
    opacity: 0;
}

.magIconHover{
    text-align: center;
    height: 58px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .magIconHover{
    opacity: 1;
  }

.iconContainer:hover .magIcon{
    opacity: 0;
}

.newsIconHover{
    text-align: center;
    height: 64px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .newsIconHover{
    opacity: 1;
  }

.iconContainer:hover .newsIcon{
    opacity: 0;
}

.eventIconHover{
    text-align: center;
    height: 80px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .eventIconHover{
    opacity: 1;
  }

.iconContainer:hover .eventIcon{
    opacity: 0;
}

.socialIconHover{
    text-align: center;
    height: 80px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .socialIconHover{
    opacity: 1;
  }

.iconContainer:hover .socialIcon{
    opacity: 0;
}

img  {
  transition: all 200ms;
  filter: grayscale(100%);
}

img:hover {
  filter: none
}