我正在创建一个图像效果，其中段落底部的文本逐渐消失
这是我想要达到的效果:
我有一些工作的 HTML 和 CSS 可以实现这种外观，但我想看看是否有更好的方法来实现这种效果？我经常发现有 HTML 技巧可以做我想做但我不知道的事情。
如果 JQuery 能够实现这种效果，我愿意使用它，但最好使用 native HTML CSS 效果。另外我的解决方案是跨浏览器的吗？
<html>
<head>
<title> </title>
<style type="text/css">
<!--
body {
background-color: blue;
text-align: center;
margin: 0 auto;
padding: 0 auto;
}
#mainContent {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
}
.textContainer {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
position: relative;
}
.recipeContentOverlay {
z-index: 5;
position: absolute;
left: 0;
top: 80px;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<div class="textContainer">
<h2 class="recipeText">Ingredients:</h2>
<p class="recipeText">Have you ever had broccoli rabe (pronounced "rahb" or "rah-bee" depending on where you are from)? I have sort of a love hate relationship with it. It looks like broccoli, but it doesn't taste like it. Broccoli rabe can sometimes be so bitter, even with blanching, there's no amount of vinegar or bacon that can save it. But bitterness heightens flavors</p>
<img class="recipeContentOverlay" src="images/overlay.png" width="100%" height="200px"/>
<!-- The idea is to get the above image to sit slightly over the top of the above "p" element so that some of the text
fades away. Is there a better way to acheive the same look/effect? -->
</div>
</div>
</body>
</html>
最佳答案
您可以使用 Cufon 实现此目的，一种通过 Javascript 将 [几乎] 任何字体嵌入网页的合法方式。您只需像往常一样包含 Cufon API，您的 Javascript 代码将如下所示:
Cufon.replace('.paragraph', { color: '-linear-gradient(black, blue)' });
这样做是选择类为“paragraph”的元素(CSS 选择器只有在您的网页上也有支持它的库时才能使用，例如 jQuery 并将其颜色设置为线性渐变。在此如果我把它从黑色变成蓝色，这样到最后它就会与您的背景颜色融为一体(根据您向我们展示的图像)。
我会尽快进行现场演示。
但是公平的警告，淡入背景的文本并不完全是用户友好的。是否要继续使用它取决于您。我承认这是一个不错的效果，但前提是它仍然完全清晰可辨。
关于javascript - 使文本看起来逐渐消失的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7942953/