我希望创建一个效果像这样，但我的网站有一个动态
background-colorp {
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 来实现呢？
您可以在 CSS 中完成此操作，但目前除了现代版本的 Chrome、Safari 和 Opera 之外，其他浏览器还没有太多支持。 Firefox 目前仅支持 SVG 蒙版。 请参阅 Caniuse 结果了解更多信息。
编辑：除 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 值）
查看具有纯色背景的演示，但您可以将其更改为您想要的任何内容。
另请注意，所有常用的 image 属性均可用于 mask-image
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>现在，可以使用另一种方法，Chrome、Firefox、Safari 和 Opera 均支持该方法。
想法是使用
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>除了使用@vals回答的css mask之外，您还可以使用透明渐变背景并将
background-cliptext创建适当的渐变：
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/
在 Windows 10 下的 Chrome 75 下测试。
我认为“混乱”的第二种方法，链接自这里的另一个问题可能是唯一的纯CSS解决方案。
如果您正在考虑使用 JavaScript，那么这就是我对问题的解决方案：
演示：使用
元素在动画背景下淡入淡出文本canvas这个想法是带有文本的元素和
元素 一个在另一个之上。您将文本保留在元素中（在 为了允许文本选择，这是不可能的canvas文本），但使其完全透明（使用canvas，在 为了让文本在 IE8 及更早版本中可见 - 那是因为你 不支持rgba(0,0,0,0)，并且在 IE8 及更早版本中不支持RGBa）。canvas然后您读取元素内的文本并将其写在画布上 具有相同的字体属性，以便您在 画布位于元素中与文本相对应的字母上方。
元素不支持多行文本，因此您将拥有 将文本分解为单词，然后在测试行上继续添加单词 然后您进行测量。如果测试线所取的宽度较大 比一条线可以拥有的最大允许宽度（你得到的 通过读取元素的计算宽度来允许最大宽度 与文本），然后你将其写在画布上，没有最后一个词 添加，您将测试行重置为最后一个单词，然后增加 将下一行写入一行高度的 y 坐标 （您也可以从元素的计算样式中获得 文本）。随着您编写的每一行，您还会降低其不透明度 具有适当步骤的文本（此步骤相反 与每行的平均字符数成正比）。canvas在这种情况下，你不能轻易做的是调整文本。有可能 完成了，但它变得有点复杂，这意味着你会 计算每个步骤的宽度并写入文本单词 逐字而不是逐行。
另外，请记住，如果您的文本容器随着您的更改而改变宽度 调整窗口大小，然后您必须清除画布并重新绘制 每次调整大小时都会在其上显示文字。
好的，代码：
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来做到这一点。
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%);
}
用标签包裹文本，并将其传递给您的 css 类
mask-image: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,0,0,.8) 30%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,0,0,.8) 30%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 100%);