gpt4 book ai didi

html - 无法让背景图片悬停在图片上

转载 作者:太空宇宙 更新时间:2023-11-04 04:45:59 25 4
gpt4 key购买 nike

我正在尝试将带有标题的透明 PNG 悬停在照片上。当我给 div position: absolute 或指定的宽度时,悬停消失了。但是,如果我不这样做,则悬停会显示在图像的右侧和左侧。

我显然做错了什么,但无法弄清楚是什么。任何帮助,将不胜感激。

谢谢!

这是网站和相关代码。

网站:http://www.theshalomimaginative.com/

<div id= "logo">
<h3><img src="Graphics/splashpagelogo.png" alt="The Shalom Imaginative Documentary Photography" /></h3>
</div>


#logo {
position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
}

h3 {
position:absolute; width:475px; height:365px;display: block;
}

h3:hover {
position:absolute; width:475px; height:365px; display: block; background-image: url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}

最佳答案

我马上看到的一个问题是您没有正确关闭标签。

代替

</logo>

应该是:

</div>

您可以这样做:

<div id="logo">

</div>

#logo {
position:absolute;
width:475px;
height:365px;
padding: 0 0 0 242px;
background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

}

#logo:hover {
position: absolute;
width:475px;
height:365px;
background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;
}

http://jsfiddle.net/tech0925/SW7GP/

如果您想为了 SEO 目的包含 h3 标签,您可以这样做:

<div id="logo">
<h3>Something Here</h3>
</div>

#logo {
position:absolute;
width:475px;
height:365px;
padding: 0 0 0 242px;
background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

}

#logo:hover {
position: absolute;
width:475px;
height:365px;
background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;
}

#logo h3 {
text-indent: -9999px;
}

http://jsfiddle.net/tech0925/YnMeD/

关于html - 无法让背景图片悬停在图片上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14484474/

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