如何在不影响其原始来源的情况下仅设置内容反射的样式？

Question

我正在使用 -webkit-box-reflect 来反映 div 以及其中的所有内容。

但是我想知道如何反映内容并能够 fiddle 仅通过 CSS 中的反映。那么假设我只想改变反射的不透明度，我该怎么做呢？

哦，出于好奇，我如何不使用 -webkit-box-reflect 为反射提供镜像效果？所以看起来我只是乘以 div/content？可以在它的下方、上方或旁边。

    .div1 {
        color: white;
        background-color:green;
        position: absolute;
        height: 50px;
        width: 150px;
        margin left: 50px;
        left: 100px;
        margin-bottom: 200px;
        margin-top: 100px;
        top: 15px;
        -webkit-box-reflect: right 1px;
    }
    
    
    .div2 {
        color: white;
        background-color:blue;
        position: absolute;
        height: 50px;
        width: 150px;
        margin left: 50px;
        left: 100px;
        margin-bottom: 200px;
        margin-top: 100px;
        top: 70px;
        -webkit-box-reflect: below 1px;
    }

    <html>
       <head>

          <div class="div1">div1 test</div>
 
          <div class="div2">div2 test</div> 

       </head>
    </html>

Answer 1

您可以在同一行甚至图像等中定义-webkit-gradients

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));

Source

不过你真的不应该使用它。有更好的方法可以通过更好的浏览器支持来实现这一点。

我认为只有在 jQuery 中才可能显示相同的内容两次。 Source

如何在不影响其原始来源的情况下仅设置内容反射的样式？

How do I style JUST the reflection of the content without affecting its original source?

html

css

webkit