CSS 正文 :after not displaying

Question

为了在 iPad 上的 Safari 上显示视差效果，我采用了以下 CSS 规则:

body:after {
    content: "";
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: -1;
    background: url(https://www.batteryminerals.com/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

你可以在 this site 上看到这个效果(在“当前元素”部分后面)。

对应staging site有 CSS 规则:

body.home:after{
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-1; /* needed to keep in the background */
    background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

在this file .

它还有内联 <style> :

<style>
    body:after{
        content:"";
        position:fixed; /* stretch a fixed position to the whole screen */
        top:0;
        height:100vh; /* fix for mobile browser address bar appearing disappearing */
        left:0;
        right:0;
        z-index:-1; /* needed to keep in the background */
        background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

第 531 行。

但是，背景图像不会显示在暂存站点。

如果我在生产网站上查看 Chrome 代码检查器，我会看到:

        ::after
     </body>
</html>

但是在暂存站点上，我没有在代码检查器中看到::after。

你能明白为什么吗？

Answer 1

最后我得到了你的解决方案:

只需在 css 中添加 display:block 即可:

body.home:after{
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-1; /* needed to keep in the background */
    background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display:block;
}