将两个图像放在另一个图像之上

Question

我的页面底部有一些社交媒体图标。它们是 png 图像，当它们悬停时，我想用不同的图像替换这些图像。我想使用给出的第一个解决方案 here 并将两张图片放在一起。

但是，我无法将图像叠加在一起。我不确定要使用什么正确的定位才能完成这项工作。有人可以给我提示吗？（对为此使用 JavaScript 不感兴趣，我还不知道它是如何工作的。

HTML

<div class="footer" align="center">
        <ul>
            <li>Follow Us:</li>
            <a><img src="Images/Social Icons/Facebook-Hover.png"><img src="Images/Social Icons/Facebook.png"></a>
            <a><img src="Images/Social Icons/Twitter-Hover.png"><img src="Images/Social Icons/Twitter.png"></a>
            <a><img src="Images/Social Icons/Instagram-Hover.png"><img src="Images/Social Icons/Instagram.png"></a>
            <a><img src="Images/Social Icons/Pinterest-Hover.png"><img src="Images/Social Icons/Pinterest.png"></a>| 
            <li><a>About Us</a></li> | 
            <li><a>Ask Us</a></li> | 
            <li><a>Contact Us</a></li>
        </ul>
</div>

CSS:

.footer {
    background-color: #061336;
    padding: 15px;
    padding-bottom: 25px;
    position: fixed;
    width: 100%;
    bottom: 0px;
}

.footer li {
    font-family: Roboto, Arial;
    margin-left: 10px;
    margin-right: 20px;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer li:hover {
    opacity: .7;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer img {
    height: 25px;
    margin-left: 3px;
    margin-right: 3px;
    right: 13px;
    top: 6px;
    position: relative;
}

Answer 1

创建 sprite sheet 图像 - 在这里您可以找到如何创建 http://css-tricks.com/css-sprites/

的教程

Answer 2

使用 :first-child CSS 选择器有一个非常简单的解决方案。

.footer ul a {
    display: block;
    position: relative;
    width: [your icon width]px;
    height: [your icon height]px;
}

.footer ul a img {
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a img:first-child {
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a:hover img:first-child {
    opacity: 0.7;
}

Answer 3

这就是我要做的，因为这样我就不必为 "margin-top: -100px" 或更糟的 javascript.

而苦恼

.myicon{
  width:50px;
  height:50px;
  background:red; 
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
  transition: background .25s ease-in-out;
}
.myicon:hover{
  background:blue;
}

<div class='myicon'></div>

将两个图像放在另一个图像之上

Position two images on top of another

html

image

z-index

css-position