CSS固定定位在移动设备上不起作用

Question

CSS固定定位在移动设备上不起作用

9

我有一个带有以下CSS的元素：

element.style {
    background-image: url(image.jpg);
}
.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

我现在正在尝试将其固定位置，因此当我尝试执行以下操作时：

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 200px;
}

该元素不再出现在页面上。

有一个包装该元素的元素：

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}

这里是html：

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

我的问题是，如何使具有背景图像的元素固定。以下是一个示例网站：

http://www.grogenex.com/

- user979331

你在移动设备上想要使用 position: fixed 做什么？是想在移动设备上保留视差效果吗？ - masterpreenz

我想在移动设备上实现视差效果。 - user979331

7个回答

3

如果我理解您的问题，您是否正在尝试做到这一点？

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 200px;
    z-index: -1;
    top: 0;
    left: 0
}
.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-content {
  background-color: #fff;
  margin-top: 200px;
  padding: 0.1em 1.5em;
}

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

- Giovanni Mesquita

图片仍然无法显示。 - user979331

这个“元素”在你的HTML的哪个部分？我没有找到它。 - Giovanni Mesquita

3

只需简单地使用background-attachment: fixed;，这将在移动设备上创建一个简单的视差效果，而无需使用JavaScript。但请确保它适用于移动设备：

// make sure this is mobile width
@media screen and (max-width: 480px) {
  .panel-image {
    background-attachment: fixed;
  }
}

然后你就完成了。

- masterpreenz

"Background-attachment: fixed;" 在 iPhone 7 上无法正常工作。 - user979331

background-attachment 在移动 Safari 上根本不起作用。请参见相关问题，除非您愿意实现 JavaScript 解决方案。 - masterpreenz

2

我相信你想要实现视差效果。不幸的是，使用position:fixed无法实现。就像其他人提到的那样，background-attachment:fixed可能有所帮助。

这是一个很好的资源，可以实现纯CSS视差/半视差效果：http://thetotobox.com/blog/easy-pure-css-parallax-effect-tutorial/

- mvdelrosario

2

你想做的是让移动版保留与桌面版相同的视差效果，同时保持响应性以支持跨浏览器。可以通过添加以下CSS属性（background-attachment）到现有代码中实现在移动设备上保持视差效果。该属性将确定图像是应该随着视口移动还是保持固定位置，或当用户在您的站点上滚动时所发生的情况。无需额外的代码。

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

希望这能对你的努力有所帮助。

- Robert Livingston

2

新回答：

如果您将CSS添加到图像中，它将创建所需的视差效果！

background-attachment: fixed;
position: fixed !important;
object-fit: cover;
height:100%;

应将其插入到image元素中，如下所示。

<img src="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg" width="2000" height="1200" alt="Grogenex" srcset="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg 2000w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-300x180.jpg 300w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-768x461.jpg 768w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-1024x614.jpg 1024w" sizes="100vw" style="
    background-attachment: fixed;
    position: fixed !important;
    object-fit: cover;
    height:100%;
">

如果你在.panel-image中添加这个代码，它还会为移动设备创建相同的视差效果！

.panel-image{
    background-attachment: fixed !important;
}

请告诉我这是否解决了你的问题！

旧答案：

在你提供的初始CSS中，图片已经被固定。你是想实现类似这样的效果吗？

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 200px;
    position:absolute;
    top:0px;
}

.twentyseventeen-panel {
    position: relative;
}
.entry-content{
 margin-top:200px;
}

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

- Naren Murali

抱歉我本来打算移除那段代码的，我并不想使用背景附加。 - user979331

@user979331，您想要完全删除杯子的图像吗？ - Naren Murali

哇，这真的把一切都搞糟了。 - user979331

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Naren Murali

让我们在聊天中继续这个讨论。 - user979331

显示剩余6条评论

0

background-attachment 属性设置背景图像是固定还是随页面其余部分滚动。

因此，您的代码中不要使用 position: fixed;，而应该使用 background-attachment: fixed;...

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 200px;
}

- Alireza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MarioE · Accepted Answer

这是另一种方法，不使用“background-attachment”或“position: fixed”。

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
    height: 400px;
}
.panel-content {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  overflow: auto !important;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.panel-content > .wrap {
    position: relative;
    background: rgba(255,255,255,0.8);
    top: 200px;
}

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>