如何将一张图片直接放在另一张图片上？ [复制]答案

【问题标题】：How do I position one image directly over the other? [duplicate]如何将一张图片直接放在另一张图片上？ [复制]
【发布时间】：2017-10-19 19:58:49
【问题描述】：

目的是让灰色图像在悬停时被蓝色覆盖（使灰色图像变为蓝色图像）。

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

Here's how the menu currently looks when I hover over the first icon.

HTML

<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>

CSS

.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;
}

提前干杯

【问题讨论】：

你有一些你想法的例子吗？
我添加了一个示例，说明它目前在上面的样子

标签： html css

【解决方案1】：

只是一个“开箱即用”的答案。您一开始不需要第二张图片，而是可以使用滤镜来实现相同的效果。

以下是两种不同的方法。 filter 有很好的支持并使用常规图像，background-blend-mode 尚不支持（感谢微软！）但使用背景图像。

#one{
  background-image: url('http://lorempixel.com/200/100/sports/1');
  background-color: blue;
  background-blend-mode: screen;
  width:200px;height:100px;
  margin-right:10px;
  float:left;
}
#one:hover{
  background-color: transparent;
}
#two{
  background-color: red;
  height:100px; width:200px;
  float:left;
}
#two img{
  filter:grayscale(100%);
  opacity:.5;
}
#two img:hover{
  filter:grayscale(0%);
  opacity:1;
}

<h3>Hover the images:</h3>

<div id="one">
</div>
<div id="two">
<img src="http://lorempixel.com/200/100/sports/1" />
</div>

【讨论】：

我会试一试，因为它会大大简化代码，谢谢

【解决方案2】：

另一种选择是为您的图标使用 SVG，并在悬停时设置 fill 的样式。 SVGs 是可缩放矢量图形，因此在任何设备分辨率或比例下都保持清晰。

这是一个简单的例子：

svg {width:20%}
svg path {
   fill: grey; 
}

svg:hover path {
  fill: blue;
}

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</svg>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>book</title>
<path d="M28 4v26h-21c-1.657 0-3-1.343-3-3s1.343-3 3-3h19v-24h-20c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24v-28h-2z"></path>
<path d="M7.002 26v0c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1s0.448 1 1 1c0.001 0 0.001-0 0.002-0v0h18.997v-2h-18.997z"></path>
</svg>

【讨论】：

对否决票有任何反馈吗？
我认为线程中的每个人都被否决了。

【解决方案3】：

相反，您可以使用 css 将所有图像的颜色更改为黑白。 https://jsfiddle.net/z57s6quj/

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

img:hover {
  filter: none
}

看看兼容性 http://caniuse.com/#search=filter

【讨论】：

【解决方案4】：

将position: relative 添加到.iconContainer 以便叠加图像上的绝对定位将相对于其父级。然后在覆盖图像上使用top: 0; left: 50%; transform: translateX(-50%); 将其定位在容器的中心，就像其他图像一样。

.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;
  position: relative;
}


/* 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;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.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;
}

<div class="footerContainer">
    <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>

    <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
  
  <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
  
  <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
</div>

【讨论】：