Javascript 使文本看起来逐渐消失的最佳方法_Javascript_Html_Css

Javascript 使文本看起来逐渐消失的最佳方法

javascript html css

Javascript 使文本看起来逐渐消失的最佳方法,javascript,html,css,Javascript,Html,Css,我正在创建一种图像效果，段落底部的文本会逐渐消失这就是我想要达到的效果：我有一些工作的HTML和CSS来达到这个效果，但是我想看看是否有更好的方法来达到这个效果？我经常发现有一些HTML技巧可以做我不知道的事情我愿意使用JQuery，如果它有能力做到这一点的话，但是原生的HTMLCSS效果最好。另外，我的解决方案是跨浏览器的吗 <html> <head> <title> </title> <style type="te

我正在创建一种图像效果，段落底部的文本会逐渐消失 这就是我想要达到的效果：
我有一些工作的HTML和CSS来达到这个效果，但是我想看看是否有更好的方法来达到这个效果？我经常发现有一些HTML技巧可以做我不知道的事情

我愿意使用JQuery，如果它有能力做到这一点的话，但是原生的HTMLCSS效果最好。另外，我的解决方案是跨浏览器的吗

<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>


成分：
你吃过花椰菜rabe（发音为“rahb”或“rah bee”，取决于你来自哪里）？我和它有一种爱恨关系。它看起来像西兰花，但尝起来不像。西兰花有时会很苦，即使烫一下，也没有多少醋或培根可以挽救它。但苦味会增加味道

您可以通过一种合法的方式通过Javascript将[几乎]任何字体嵌入到网页中来实现这一点。您只需像往常一样包含Cufon API，您的Javascript代码如下所示：

Cufon.replace('.paragraph', { color: '-linear-gradient(black, blue)' });

这样做就是用类“段落”选择元素（CSS选择器只能在你的网页上有一个支持它的库的情况下使用，比如，并将其颜色设置为线性渐变。在这种情况下，我将它从黑色变为蓝色，以便最终与背景色混合（根据你给我们看的图像，就是这样）

我很快就会有一个现场演示

不过，警告一下，文本淡入背景并不完全是用户友好的。是否继续使用它取决于您自己。我承认这是一个很好的效果，但只有当它仍然清晰可辨时。

尝试类似的方法。基本上，我们使用CSS渐变和不透明度来设置颜色

你可以使用一个网站来帮助写css。基本上你所做的是绝对地在固定高度的段落末尾放置一个div。我们对它应用渐变不透明度更改

div.fade {
    position: absolute; 
    bottom: 0;
    height: 45px;
    width: 100%;
    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */


}

文本淡出会变得有点难以阅读，您确定要阅读吗？醒目的蓝色背景对文本可读性也不是很好；）为文本添加渐变效果，使其褪色为背景色是否可以接受？不过，您仍然可以选择文本。感谢您的建议，lol蓝色背景就是一个例子，它真的是白色的，所以它很好地融合在一起。我想我会避免褪色，但因为它是为了给配方文本提供一个模糊示例，我要强制用户点击查看整个文本/recipeAlso，只需突出显示文本即可使其再次可见。@Kolink:我认为这不会有问题，因为Jake M将让用户点击按钮查看整个配方。