[英]CSS before and after not working with parallax
我正在尝试为我的div元素之前和之后申请,这是一个视差元素
<div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505">
但是我的前后都没有应用,在检查chrome中的元素时看不到它们。
这是我的CSS:
#OurPhilosophy:before {
position: absolute;
width: 100%;
left: 0;
top: -149px;
height: 200px;
background: #fff;
transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
}
#OurPhilosophy:after {
position: absolute;
width: 100%;
left: 0;
bottom: -149px;
height: 200px;
background: #fff;
transform: skewY(3deg);
-moz-transform: skewY(3deg);
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
}
添加CSS然后尝试:
#OurPhilosophy:before,
#OurPhilosophy:after {
content:'';
}
#OurPhilosophy:before { position: absolute; width: 100%; left: 0; content;""; top: -149px; height: 200px; background: #999; transform: skewY(-3deg); -moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -ms-transform: skewY(-3deg); } #OurPhilosophy:after { position: absolute; width: 100%; left: 0; content;""; bottom: -149px; height: 200px; background: #555; transform: skewY(3deg); -moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -ms-transform: skewY(3deg); }
<div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505">
#OurPhilosophy::before { position: absolute; width: 100%; left: 0; content:""; top: -149px; height: 200px; background: #555; transform: skewY(-3deg); -moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -ms-transform: skewY(-3deg); } #OurPhilosophy::after { position: absolute; width: 100%; left: 0; content: ""; bottom: -149px; height: 200px; background: #999; transform: skewY(3deg); -moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -ms-transform: skewY(3deg); }
<div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.