CSS3不透明度渐变？

Question

我希望创建一个效果like this，但我的网站有一个动态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不透明度渐变。 This有点作品，但代码太乱了。看看第二个例子，我可以在jQuery中实现它，但有没有办法在CSS中完全做到这一点？

Answer 1

你可以在CSS中使用它，但目前除了Chrome，Safari和Opera的现代版本之外，浏览器的支持不多。 Firefox目前仅支持SVG掩码。有关详细信息，请参阅Caniuse结果。

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值）结束的渐变

查看具有扎实背景的演示，但您可以将其更改为您想要的任何内容。

<强> DEMO

另请注意，所有常用的图像属性都可用于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);
}

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

Answer 2

我认为从another question here链接的“凌乱”第二种方法可能是唯一的纯CSS解决方案。

如果你正在考虑使用JavaScript，那么这就是我解决问题的方法：

  

demo: using a canvas element to fade text against an animated background

     

这个想法是你的元素带有文本和canvas元素   是一个在另一个之上。您将文本保留在元素中（in   为了允许文本选择，这是canvas无法实现的   文本），但要使其完全透明（使用rgba(0,0,0,0)，in   为了让文字在IE8和老版本中可见 - 那是因为你   在IE8及更早版本中没有RGBa支持且没有canvas支持。

     

然后阅读元素中的文本并将其写在画布上   具有相同的字体属性，以便您在每个字母上写   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);
};

Answer 3

除了使用css mask回答的@vals之外，您还可以使用透明度渐变背景并将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/

在Windows 10下的Chrome 75下进行了测试。

支持的平台：

• https://caniuse.com/mdn-css_properties_background-clip_text
• https://caniuse.com/css-gradients

Answer 4

我们可以通过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%);
  
}