那些遇到过的问题

div底部的渐变不透明度

raf*_*235 15 html css gradient opacity

我想在这张图片上创建效果 - 内容底部的渐变不透明度: 不透明度

我该怎么做？

Lov*_*edi 14

您可以使用此HTML

<div class="content">
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>
    Loriem ispsum is simply dummy text<br>


     <div class="gradientback">

     </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有了这个CSS

body{background:#000;}
.content{
    width:500px;
    height:300px;
    position:relative;
    color:#fff;
    overflow:hidden;
}
.gradientback{

    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    background: -moz-linear-gradient(top,  rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
Run Code Online (Sandbox Code Playgroud)

这是jsfiddle链接

Vik*_* NM 6

我知道这个问题比较旧，但 JIC 有人发现这个问题正在寻找解决方案。Love Trivedi 接受的答案很好，但仍然存在一些问题。使用绝对定位是可以的，但是要覆盖div；建议同时使用 top: 0px 和 right: 0px。中还有多余的零filter，起始颜色应startColorstr='#89fff1'与其他起始颜色保持一致。

该解决方案还有两个缺点。首先，它不允许选择底层文本，因此您需要pointer-events: none;在gradientback类中使用a来允许选择文本。第二个问题是此解决方案会淡入某种颜色，因此您必须确保第二种颜色与页面背景匹配才能获得所需的效果。这使用了覆盖 DIV，因此淡入透明不会对内容 DIV 的视觉效果产生任何影响。

这是一个更新的jsfiddle，其中包含建议的更改和第一个文本行上的链接，以便您可以测试指针事件选项。

。

更现代的解决方案是使用 CSS3 mask-image。解决方案 2 的jsfiddle示例。

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
Run Code Online (Sandbox Code Playgroud)

它对旧版浏览器的支持较少，但实际上将容器淡入透明，允许任何种类的页面背景，同时仍然保持所需的效果。

。

这是第一个解决方案的更新 HTML，以防 jsfiddle 给您带来问题

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>gradient test</title>
    <meta name="description" content="gradient test">
    <meta name="author" content="Viking">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<style>
body {
    background: #000;
}
.content {
    width: 500px;
    height: 300px;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.gradientback {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    background: -moz-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(137, 255, 241, 0)), color-stop(100%, rgba(0, 0, 0, 1))); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(137, 255, 241, 0) 0%, rgba(0, 0, 0, 1) 100%); /* W3C */
    filter: progid: dximagetransform.microsoft.gradient(startColorstr='#89fff1', endColorstr='#000000', GradientType=0); /* IE6-9 */
}
</style>

<div class="content">
    Loriem <a href="https://google.com" target="google">ispsum</a> is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    <div class="gradientback"></div>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

和现代解决方案。您不需要内部 DIV，只需将行添加mask-image到内容类即可。

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>gradient test</title>
    <meta name="description" content="gradient test">
    <meta name="author" content="Viking">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<style>
body {
    background: #000;
}
.content {
    width: 500px;
    height: 300px;
    position: relative;
    color: #fff;
    overflow: hidden;

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
</style>

<div class="content">
    Loriem <a href="https://google.com" target="google">ispsum</a> is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

28009 次

最近记录：

7 年，3 月 前
相关归档
单对双引号('vs') 241
$(window).width()与媒体查询不同 180
我该如何组织CSS文件的内容？ 77
禁用或重置CSS规则 45
容器内的可滚动div 34
不能在<td>标签上放置边距,既没有CSS也没有cellspacing属性 31
基于位置的响应式文本对齐 24
如何从url参数预先填充html表单输入字段？ 21
如果使用CSS激活子级或孙级链接,则将父级链接设置为活动状态 18
在纯色背景上添加透明渐变 3
难疑归档
单身人士有什么不好的？ 1931
C++ 11引入了标准化的内存模型.这是什么意思？它将如何影响C++编程？ 1810
JavaScript中的'new'关键字是什么？ 1684
如何停止跟踪并忽略Git中文件的更改？ 1634
LINQ中的多个"order by" 1537
JavaScript发布请求,如表单提交 1465
用于更新和删除的HTTP状态代码？ 1264
在Python中从文件名中提取扩展名 1167
简单的面试问题变得更难:给出数字1..100,找到丢失的数字 1115
按属性排序自定义对象的ArrayList 1093