0

我有一个 700px x 300px 的 div 和一个 700px x 300px 的背景图片。div 高度可以增加到 600px。使用 jQuery 更改 Div 大小。

我有一个 div 的下一个 CSS 样式：

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

如果增加 div 高度，则背景应垂直镜像反射。我在我的 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);}

但它不起作用（我尝试不同的浏览器）。我可以错过什么吗？

4

1 回答 1

1

我认为您错过了 :before 元素中的一些重要样式。您必须指定内容、尺寸，并且由于 :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

请注意，:before 元素会将整个内容向下推，因此您可能希望将 :before 设置为 position:absolute。但我认为如果你玩它，你会弄清楚你需要什么。

顺便说一句，只有 -webkit 前缀就足够了，因为其他浏览器不再使用前缀进行转换。检查http://caniuse.com/#search=translate以匹配您所需的浏览器支持。

于 2014-07-18T07:10:40.143 回答