我的页面上有一张图片，边缘粗糙，看起来有点撕裂，并且有一个内部阴影，看起来像是页面的缩进。我希望它上面的内容在图像边缘下方滚动而不超出可见图像。该图像是PNG，并且在撕裂效果周围是透明的，但我仍然无法将其隐藏在背景下。
问问题
106 次
3 回答
1
看起来你快到了。
对于您的 cotext div，尝试将其放置在距顶部 20px 的位置。
<div id="cotext" style="position:relative;top:20px;">
这种方式应该更合适。
于 2013-02-11T22:56:59.230 回答
0
问题是您只有一张图像。它是否透明都不会影响它，因为无论如何，它都在文本下方（否则您将无法看到文本）。您要做的是将其分成两个图像；一个只有背景（银色闪亮部分），另一个只有撕开的部分和透明的中心。然后，您可以将背景图像放在文本下方，将剪切图像放在文本顶部（在 z-index 中）。
编辑：
好的，我没有注意到您的背景图像外部是透明的。你想要做的是：
- 保持背景图像不变
- 获取原始图像文件（我假设是 Photoshop），并将外部设置为白色而不是透明。
- 然后取中心并使其透明。所以你应该有的只是它周围的白框。
- 摆脱任何图层效果
- 将该图像保存为前景
- 使文本在背景顶部滚动，就像您最初拥有它一样
- 将此新图像放置在该区域的正上方，与背景图像完全相同
编辑2：
我刚刚意识到这也行不通，因为您的页面背景不是白色的，但它有某种曲折的东西。因此，我想到了另一种选择。
BG 图像将是银色背景，上面没有图层效果。只是普通的旧普通银色部分，但周围的透明边框保持原样。
顶部图像将仅是透明背景上的图层效果，没有银色部分。对于此图像，请确保在图像周围也保留透明边框。
这样文本将位于阴影效果下方，因此当它在顶部滚动时，突然的剪切线不会那么明显。您可能会看到一点，但它至少会最小化影响。当然，阴影效果也会出现在图像和文本之上，所以你可能也不喜欢这个解决方案。
于 2013-02-11T23:04:19.540 回答
0
替换此行
<div id="content">
有了这个
<div id="content" style="margin-top: 22px;">
于 2013-02-11T22:53:39.073 回答