我需要用 CSS 反射文本并为其添加渐变。这是一个例子我想要的。但我不想要具有 alpha 透明度的淡出 png 图像因为身体有背景.
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:我找不到任何方法可以跨浏览器工作，我想说可能根本没有办法。如果您需要单独支持 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>