在CSS中反射具有渐变效果的文本 [英] Reflecting text with gradient effect in CSS

问题描述

我需要使用CSS反射文本并向其添加渐变。

https://jsfiddle.net/9318Ltkp /

  .slogan {font-size：30px; line-height：121px;位置：相对; float：right; margin-right：115px; text-transform：uppercase; color：＃f00;}。slogan :: after {position：absolute; z-index：1; right：0; bottom：-26px; left：0;显示：block;内容：即将到来; transform：scaleY（-1）; opacity：.5;}  

 < div class = slogan>即将上市< / div>  

解决方案

注意：我无法找到这些工作跨浏览器，我想说可能没有办法。如果您需要单独支持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％;高度：100％; bottom：0px; left：0px; transform：scaleY（-1）; transform-origin：bottom;} div：after {content：attr（data-content）;背景：线性梯度（到底部，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' >反映的文字< / div>  

---

b $ b

跨浏览器解决方案：

这是最佳跨浏览器解决方案但它涉及通过在父项上放置 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'>反映的文字< / div> ;  

---

strong>原始答案：

您可以通过将：之前这种方法将仅在以下情况下有效：： $

背景是纯色（任何纯色）。所有需要做的是改变渐变中的颜色来匹配它。

  div {position：relative; display：inline-block; font-size：24px;} div：after，div：before {position：absolute; width：100％;高度：100％; bottom：0px; left：0px; transform：scaleY（-1）; transform-origin：bottom;} div：after {content：attr（data-content）;} div：before {content：背景：线性梯度（到底部，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'>反映的文字< / div>  

I need to reflect text with CSS and add gradient to it. Here is an example of what I want. But I do not want fade-out png image with alpha transparency as body has a background.

https://jsfiddle.net/9318Ltkp/

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

解决方案

Note: I could'nt find anyway to get this working across browsers and I'd say there is probably no way at all. If your need is to support WebKit powered browsers alone then you could use the below.

In this method, a gradient which goes from transparent to semi-transparent black is assigned as background to the pseudo-element (which produces the reflection effect) and then the background is clipped to just be within the boundaries of the text using WebKit's -webkit-background-clip .

Unfortunately, no equivalent property exists for other browsers. In other browsers, we can assign a linear-gradient background to the element, make the text color as transparent but that's about it. There is no way to clip the background to be within the text. It will apply to the entire element.

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>

---

Cross-browser solution:

This the best cross browser solution that I could find but it involves hard cutting the reflected text by putting a overflow: hidden on the parent instead of a graceful fade.

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>

---

Original Answer:

You can achieve this by overlaying a :before pseudo element with the gradient background on top of the :after pseudo-element.

This approach would work only when the background is a solid color (any solid color). All that is needed to be done is change the colors in the gradient to match it. However this wouldn't work when used with image or gradient backgrounds.

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>

这篇关于在CSS中反射具有渐变效果的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！