使文本看起来消失的最佳方式 [英] Best way to make text look fading away
问题描述
我正在创建一个图像效果，其中一个段落底部的文字消失
这是我想实现的效果：
< img src =https://i.stack.imgur.com/mjs6l.pngalt =enter image description here>
我有一些工作HTML& CSS实现这种外观，但我想看看是否有一个更好的方法来实现这种效果？我经常发现有HTML的技巧来做我想要的，我不知道。
I am creating an image effect where the text at the bottom of a paragraph fades away
This is the effect I'm trying to achieve:
I have some working HTML & CSS which achieves this look but I am looking to see if there is a better way to achieve this effect? I've often found that there are HTML tricks to do what I want that I dont know of.
我可以使用JQuery如果它有能力做这种效果，但是一个原生的HTML CSS效果是最好的。 Plus是我的解决方案跨浏览器？
I'm open to using JQuery if it has the ability to do this effect but a native HTML CSS effect would be best. Plus is my solution cross browser?
<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>
推荐答案
基本上，我们使用CSS渐变和不透明度来设置颜色。
Try something like this. Basically we use CSS gradients and opacity to set the color.
您可以使用网站喜欢这个帮助获取css写入。基本上你所做的是绝对地定位一个div在固定高度的段落的末尾。我们对它应用渐变不透明度变化。
You can use a site like this one to help with getting the css written. Basically what you do is absolutely position a div at end of paragraph of fixed height. We apply a gradient opacity change to it.
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 */
}
这篇关于使文本看起来消失的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
