Question

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

然而，我想知道如何反映内容并且能够摆弄CSS中的反射。所以，让我说我想改变反思的不透明度，我该怎么做呢？

哦，只是好奇心，我怎么不使用-webkit-box-reflect给反射带来镜像效果？相反，看起来我只是乘以div /内容？可以在它下面，上面或旁边。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Source

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

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

如何在不影响其原始来源的情况下设计内容的反映？

1 个答案: