Question

我正在创建一个图片效果，其中段落底部的文字消失 这就是我想要达到的效果：
enter image description here 我有一些工作的HTML＆amp;实现这种外观的CSS，但我希望看看是否有更好的方法来实现这种效果？我经常发现有一些HTML技巧可以做我想要的，我不知道的。

我愿意使用JQuery，如果它能够做到这一点，但原生HTML CSS效果最好。 Plus是我的跨浏览器解决方案吗？

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

Answer 1

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

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

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

我很快就会有现场演示。

虽然公平警告，文字淡入背景并不完全是用户友好的。您是否想继续使用它取决于您。我承认这是一个很好的效果，但只有当它仍然完全清晰时。

Answer 2

尝试这样的事情。基本上我们使用CSS渐变和不透明度来设置颜色。

http://jsfiddle.net/V45LW/

您可以使用网站like this one来帮助您编写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 */


}

让文字看起来消失的最佳方式

2 个答案: