Question

我需要用CSS反射文本并为其添加渐变。我想要的Here is an example。但是我不希望淡出png图像的alpha透明度因为body有背景。

.slogan {
  font-size: 30px;
  line-height: 121px;
  position: relative;
  float: right;
  margin-right: 115px;
  text-transform: uppercase;
  color: #f00;
}
.slogan::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -26px;
  left: 0;
  display: block;
  content: 'comming soon';
  transform: scaleY(-1);
  opacity: .5;
}

<div class="slogan">comming soon</div>

Answer 1

注意：我无论如何都无法找到能够跨浏览器工作的内容，而且我认为根本没有办法。如果您需要单独支持WebKit驱动的浏览器，那么您可以使用以下内容。

在此方法中，从透明到半透明黑色的渐变被指定为伪元素的背景（产生反射效果），然后剪切背景以使其仅在文本的边界内WebKit的-webkit-background-clip。

不幸的是，其他浏览器存在没有等效属性。在其他浏览器中，我们可以为元素指定线性渐变背景，使文本颜色透明，但这与它有关。无法将背景剪辑为文本内部。它将适用于整个元素。

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
}
div:after,
div:before {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
}
div:after {
  content: attr(data-content);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

跨浏览器解决方案：

这是我能找到的最佳跨浏览器解决方案，但它涉及通过在父级上放置overflow: hidden而不是优雅渐变来硬切割反射文本。

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
  height: 1em;
  padding-bottom: .5em;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: attr(data-content);
  width: 100%;
  height: 1em;
  top: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
  opacity: 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

原始答案：

您可以通过在:before伪元素顶部覆盖渐变背景的:after伪元素来实现此目的。

只有当背景为纯色（任何纯色）时，此方法才会起作用。所有需要做的就是更改渐变中的颜色以匹配它。但是，当与图像或渐变背景一起使用时，这将不起作用。

div { position: relative; display: inline-block; font-size: 24px; } div:after, div:before { position: absolute; width: 100%; height: 100%; bottom: 0px; left: 0px; transform: scaleY(-1); transform-origin: bottom; } div:after { content: attr(data-content); } div:before { content: ''; background: linear-gradient(to bottom, rgba(0, 128, 0, 1) 30%, rgba(0, 128, 0, 0.7) 70%); z-index: 2; } body { background: rgb(0, 128, 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div data-content='Reflected Text'>Reflected Text</div>

Answer 2

对于渐变我已经设计了这个请在下面的代码中找到： - 对于反映我认为这也是一个简单的任务，svg旋转180度，渐变从上到下透明到白色。如果这会导致其他一些影响，那么请使用clip svg这对你有帮助。

<html>
<body>

<svg height="150" width="400">
  <defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          </linearGradient>
  </defs>

  <text fill="url('#grad2')" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>


</body>

</html>

在CSS中反映具有渐变效果的文本

2 个答案: