CSS3不透明度梯度 CSS3不透明度梯度 CSS3? ？

我期待创建一个效果 像这样，但我的网站有一个动态 background-color。请注意，这个例子使用了一个白色覆盖，它不适用于不同的背景。

p {
width: 300px;
overflow: hidden;
height: 50px;
line-height: 50px;
position: relative;
}
p:after {
content: "";
width: 100px;
height: 50px;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

我希望做的是设置一个 CSS 不透明渐变。这个算是可行的，但是代码太混乱了。看看第二个例子，我可以用 jQuery 实现它，但是有没有完全用 CSS 实现的方法呢？

215218 次浏览
小开

我认为“凌乱”的第二种方法，这是从 这里的另一个问题链接可能是唯一的纯 CSS 解决方案。

如果你正在考虑使用 JavaScript，那么这就是我对这个问题的解决方案:

Demo: 使用 canvas元素在动画背景上淡化文本

这个想法是，您的元素与文本和 canvas元素 将文本保存在元素中(在 以允许文本选择，这是不可能的 canvas 文本) ，但使其完全透明(使用 rgba(0,0,0,0)，在 为了让文本可见在 IE8和更老的-这是因为你 在 IE8及以上版本中没有 RGBa支持和 canvas支持)。

然后读取元素中的文本并将其写到画布上 使用相同的字体属性，以便您在 画布位于元素中与文本对应的字母之上。

canvas元素不支持多行文本，因此 把文本分解成单词，然后在测试行上不断添加单词 然后测量。如果测试线采用的宽度更大 比一条直线的最大允许宽度还要大(你会得到 通过读取元素的计算宽度得到的最大允许宽度 然后把它写在画布上，没有最后一个单词 添加，您重置测试行为最后一个字，并且您增加 写下一行高度的 y 坐标 (也可以从元素的计算样式中获得 你写的每一行，你也减少了不透明度 文本与一个适当的步骤(这一步骤是相反的 与每行的平均字符数成正比)。

在这种情况下，您不能轻易地对文本进行调整 完成了，但是它变得有点复杂，这意味着你会 计算每个步骤的宽度，并通过以下方法写出文本单词 逐字而不是逐行。

另外，请记住，如果您的文本容器的宽度随着您的变化而变化 调整窗口的大小，然后必须清除画布并重新绘制 每个大小上的文字。

密码是:

HTML :

<article>
<h1>Interacting Spiral Galaxies NGC 2207/ IC 2163</h1>
<em class='timestamp'>February 4, 2004 09:00 AM</em>
<section class='article-content' id='art-cntnt'>
<canvas id='c' class='c'></canvas>In the direction of <!--and so on-->
</section>
</article>

CSS :

html {
background: url(moving.jpg) 0 0;
background-size: 200%;
font: 100%/1.3 Verdana, sans-serif;
animation: ani 4s infinite linear;
}
article {
width: 50em; /* tweak this ;) */
padding: .5em;
margin: 0 auto;
}
.article-content {
position: relative;
color: rgba(0,0,0,0);
/* add slash at the end to check they superimpose *
color: rgba(255,0,0,.5);/**/
}
.c {
position: absolute;
z-index: -1;
top: 0; left: 0;
}
@keyframes ani { to { background-position: 100% 0; } }

JavaScript :

var wrapText = function(ctxt, s, x, y, maxWidth, lineHeight) {
var words = s.split(' '), line = '',
testLine, metrics, testWidth, alpha = 1,
step = .8*maxWidth/ctxt.measureText(s).width;


for(var n = 0; n < words.length; n++) {
testLine = line + words[n] + ' ';
metrics = ctxt.measureText(testLine);
testWidth = metrics.width;
if(testWidth > maxWidth) {
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha  -= step;
ctxt.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else line = testLine;
}
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha  -= step;
ctxt.fillText(line, x, y);
return y + lineHeight;
}


window.onload = function() {
var c = document.getElementById('c'),
ac = document.getElementById('art-cntnt'),
/* use currentStyle for IE9 */
styles = window.getComputedStyle(ac),
ctxt = c.getContext('2d'),
w = parseInt(styles.width.split('px')[0], 10),
h = parseInt(styles.height.split('px')[0], 10),
maxWidth = w,
lineHeight = parseInt(styles.lineHeight.split('px')[0], 10),
x = 0,
y = parseInt(styles.fontSize.split('px')[0], 10),
text = ac.innerHTML.split('</canvas>')[1];


c.width = w;
c.height = h;
ctxt.font = '1em Verdana, sans-serif';
wrapText(ctxt, text, x, y, maxWidth, lineHeight);
};
小开

你可以用 CSS，但目前除了现代版的 Chrome、 Safari 和 Opera 之外，浏览器并没有太多的支持。Firefox 目前只支持 SVG 掩码。来做，更多信息参见 卡尼斯的结果。

编辑: 除 IE 之外的所有浏览器现在都支持这里提到的所有 mask-属性。

CSS:

p {
color: red;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

技巧是指定一个掩码，该掩码本身是一个渐变，以不可见(通过 alpha 值)结束

看到一个具有坚实背景的演示，但是您可以将其更改为任何您想要的。

演示

还请注意，所有常用的 形象属性都可用于掩码图像

p  {
color: red;
font-size: 30px;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-size: 100% 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left top, left bottom;
}


div {
background-color: lightblue;
}
<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

Now, another approach is available, that is supported by Chrome, Firefox, Safari and Opera.

The idea is to use

mix-blend-mode: hard-light;

如果颜色是灰色，那么就会产生透明度。然后，元素上的灰色叠加就会产生透明度

div {
background-color: lightblue;
}


p {
color: red;
overflow: hidden;
position: relative;
width: 200px;
mix-blend-mode: hard-light;
}


p::after {
position: absolute;
content: "";
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background: linear-gradient(transparent, gray);
pointer-events: none;
}
<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

小开

除了使用由 @ val回答的 CSS 掩码外，还可以使用透明渐变背景并将 background-clip设置为 text。

创建适当的渐变:

background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

然后用文字剪贴背景:

background-clip: text;
color: transparent;

演示

Https://jsfiddle.net/simonmysun/2h61ljbn/4/

在 Windows10下在 Chrome75下测试。

辅助平台:

小开

我们可以用 css。

body {
background: #000;
background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(231, 231, 231, .3) 22.39%, rgba(209, 209, 209,  .3) 42.6%, rgba(182, 182, 182, .3) 79.19%, rgba(156, 156, 156, .3) 104.86%);
  

}

提交答案