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：背景鏡像反射

回答

相關問題