我在网上搜索了大约 6 个小时，但找不到我需要的东西，所以我认为是时候向专业人士询问了。 我有一个 png 图像，其中有一些透明点。我不希望将此图像作为页面的标题，并且当有人滚动页面时，图像保留在顶部，而页面滚动到图像后面。我找到了一些非滚动标题 div 的示例，但就我而言，我希望看到页面滚动穿过图像中的透明点。 这可能吗？那么有人可以向我展示如何操作或指导我使用教程或示例吗？
一些简单的 html 让我的问题更清楚:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<a href="mypage" target="top"><img src="myimage.png"></a>
<div id="content">
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<div>
</body>
</html>
最佳答案
使图像中您想要看穿的地方透明。这将在图形软件中完成。然后设置 anchor ，以易于索引的方式(例如使用 id)保存图像。
<a id="transparentHeader" href="mypage" target="top"><img src="myimage.png"></a>
然后设置 css，使 anchor “固定”到页面顶部。
#transparentHeader{
z-index:999;
position:fixed;
top: 0px;
left:0px;/*not centered*/
/* margin: 0 auto; centered */
}
关于javascript - 非滚动 png 图像作为标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15733393/