Question

我知道这里是该问题的几个主题，但是我尝试了所有操作，但没有成功。我尝试了JS解决方案，但是我不太了解JS。我只是一个初学者。

我在CSS中使用了背景设置。

body:after {
content:"";
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:-1;
display:block;
background:url('img/4/bike-2756269_1920.jpg') no-repeat 80% 50%;
background-size:cover;}

Answer 1

使用此元标记可能会对您有所帮助。

      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Answer 2

很明显，您需要添加此CSS规则以确保after伪元素相对于身体定位。

body { position: relative; }

希望我进一步推动了你。

Answer 3

我不确定您无法在手机上看到它的意思，但是您尝试使用background-attachment: fixed吗？

body {
   background:url('img/4/bike-2756269_1920.jpg') no-repeat 80% 50%;
   background-size:cover;
   background-attachment: fixed;
}

这将“锁定”您的背景图像，并且仍然允许body元素滚动。

Answer 4

首先，您需要将背景分配给body元素本身，然后，如果您想在背景中查看整个图像，则代码将如下所示：

body {
    background:url('img/4/bike-2756269_1920.jpg') no-repeat;
    background-size: contain;
    background-attachment: fixed;
}

Answer 5

如果您坚持使用after元素，则可以将整个页面包装在div中：

<body>
    <div class="outer">...

然后使用以下CSS：

    .outer:after {
        content:"";
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        z-index:-1;
        display:block;
        background:url('bike-2756269_1920.jpg') no-repeat 80% 50%;
        background-size:cover;
    }
    .outer{
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        max-height: 100%;
        overflow-y: scroll;
    }

这样，您可以使用滚动并在after伪元素中使用背景-这是不好的解决方案，除非您想将其用于某些js视差滚动或类似操作

网站背景图片跳上手机

5 个答案: