Question

我正在尝试在我的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);
}

Answer 1

添加css然后尝试：

#OurPhilosophy:before,
#OurPhilosophy:after {
    content:'';
}

Answer 2

#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">

Answer 3

＆＃13;

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

＆＃13;

<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">

＆＃13;

不使用视差之前和之后的CSS

3 个答案: