gpt4 book ai didi

css - 当图像位于另一个图像之上时无法执行翻转图像

转载 作者:太空宇宙 更新时间:2023-11-03 18:08:25 25 4
gpt4 key购买 nike

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>

最佳答案

试试这个

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

关于css - 当图像位于另一个图像之上时无法执行翻转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24252390/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com