CSS：背景镜像反射

我有一个div 700px x 300px和背景图片700px x 300px。 div的高度可以增加到600px。 Div的大小随jQuery而改变。CSS：背景镜像反射

我有一个未来的CSS样式的div：

#myDiv { 
position:relative; 
overflow:visible; 
background:transparent url(../images/background.jpg) bottom no-repeat; 
border:1px solid #000; 
-webkit-box-shadow:0 0 10px 2px #000; 
-moz-box-shadow:0 0 10px #000; 
-ms-box-shadow:0 0 10px #000; 
-o-box-shadow:0 0 10px #000; 
box-shadow:0 0 10px 2px #000; 
margin:10px;}

如果格高度增加，背景应该mirrorly通过垂直反射。我已经添加了接下来的CSS样式在我的CSS文件：

#myDiv:before { 
background:url(../images/background.jpg); 
-webkit-transform: scaleY(-1); 
-moz-transform: scaleY(-1); 
-ms-transform: scaleY(-1); 
-o-transform: scaleY(-1); 
transform: scaleY(-1);}

但它不工作（我尝试不同的浏览器）。我可以想念什么吗？

来源

2013-05-08 user1820034

您是否试过'-webkit-transform：rotate（180deg）'？不确定scaleY的负值使用情况。 – RelevantUsername 2013-05-08 12:32:26

我想你会错过：before元素中的几个重要样式。您必须指定内容，尺寸，因为：在显示默认内联之前，您必须将其设置为阻止。

#myDiv:before { 
    content: ""; 
    display: block; 
    height: 300px; 
    width: 700px; 

    background: url(http://lorempixel.com/700/300/); 
    -webkit-transform: scaleY(-1); 
    transform: scaleY(-1); 
}

整个演示：http://codepen.io/canescz/pen/zHCjA

。注意：要素推动整个内容下来之前，所以你可能要做出：以前一样的位置是：绝对的。但是我认为如果你玩的话，你会弄清楚你需要什么。

顺便说一句，只有-webkit前缀应该足够了，因为其他浏览器不再使用变量的前缀。检查http://caniuse.com/#search=translate以符合您所需的浏览器支持。

来源

2014-07-18 07:10:40

CSS：背景镜像反射

回答

相关问题