Question

我在网上搜索了6个小时，找不到我需要的东西，所以我觉得是时候向专业人士询问了。我有一个png图像，里面有一些透明点。我不希望这个图像作为我页面的标题，当有人滚动页面时，图像保持在顶部，而页面在图像后面滚动。我找到了一些非滚动标题div的例子，但在我的情况下，我希望看到页面滚动到图像中的transrant点。这甚至可能吗？那么有人可以告诉我如何或指导我学习教程或示例吗？

一些简单的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>

Answer 1

使您想要透过的地方透明。这将在图形软件中完成。然后设置你的锚点，其中包含一个易于索引的方式，例如带有id。

<a id="transparentHeader" href="mypage" target="top"><img src="myimage.png"></a>

然后设置css，使锚点“固定”到页面顶部。

#transparentHeader{
 z-index:999;
 position:fixed;
 top: 0px;
 left:0px;/*not centered*/
 /* margin: 0 auto; centered */
}

Answer 2

看看这是否适合您。

<div class="header">Some data</div>


.header
{
position:fixed;
top:10px;
}

非滚动png图像作为标题

2 个答案: