Question

Berlow是一个简单的代码，可以将图像放在另一个图像的顶部。问题是，图像翻转发生，但原始图像仍然显示并且类似地（位置）偏移，即，在下方和右侧。两个翻转图像的图像大小完全相同。谢谢，如果你能提供一些反馈......

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#header {
    height: 500px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    left: 0;
    top: 0;
}
#button1 {
    position: absolute;
    'display: inline-block;
    top: 100px;
    left: 50px;
}
a:hover {       
    position: absolute;
    display: inline-block;
    top: 100px;
    left: 50px;
    width: 122px;
    height: 28px;
    background-image: none;
    background-image: url('images/buttonRed1.gif');
}

</style>
</head>

<body>
<div id="header">
  <img src="images/large.jpg"/>
  <a id="myLink" href="abc.html">
  <div id="button1" style="background-image:url(images/buttonRed2.gif); width: 122px; height: 28px;"></div></a>
  </div>
</div>
</body>
</html>

Answer 1

试试这个

#button1{
    position: absolute;
    display: inline-block;
    top: 100px;
    left: 50px;
    background-image: url('images/large.jpg');
}

#button1:hover {
    background-image: url('images/buttonRed1.gif');  no-repeat;
}

Answer 2

好的，所以你应该给你的css一些重大改变。请考虑以下事项：

哪个应该有不断变化的背景图片？按钮或链接？因为您将第一个图像放在链接中，第二个放在div中...
在显示示例时，您应尝试提供一些jsfiddles。它加快了响应过程。

无论如何，我删除了整个按钮div并将所有css放在链接上，然后将以下css放在链接上：

#myLink{
    background-image:url('some/image.jpg');  
    width:122px;  
    height: 28px;  
    background-size: 122px 28px;  
    position: absolute;  
    display: inline-block;  
    background-repeat: no-repeat; 
    top: 100px;  
    left: 50px;  
}

#myLink:hover {    
    background-image: url('another/image.jpg');
}

这是一个demo。

当图像位于另一个图像之上时，无法进行翻转图像

2 个答案: