固定的 CSS 位置不会出现在移动设备上答案

【问题标题】：CSS position fixed does not appear on mobile固定的 CSS 位置不会出现在移动设备上
【发布时间】：2017-08-28 01:06:45
【问题描述】：

我有一个类似这个 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/

【问题讨论】：

您想在移动设备中使用position: fixed 做什么？正在尝试在移动设备中保留视差外观？
我想要移动端的视差效果

标签： css

【解决方案1】：

这是另一种方法，它不使用“背景附件”或“位置：固定”。

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

【讨论】：

【解决方案2】：

如果我理解您的问题，您是否要这样做？

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

【讨论】：

图片仍然没有出现
这个“元素”在你的 html 的哪一部分？我没找到。

【解决方案3】：

只需简单地使用background-attachment: fixed;，这将在没有JavaScript 的情况下在移动设备上创建一个简单的视差效果，但只需确保它附加到移动设备上：

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

你去吧。

【讨论】：

后台附件：已修复；不适用于 iPhone 7
background-attachment 根本不适用于移动 safari。 see related issue 除非你愿意在 JavaScript 解决方案中实现。

【解决方案4】：

新答案：

如果您将 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>

【讨论】：

对不起，我是想把那段代码拿出来，我不想使用背景附加
@user979331 所以你想完全删除杯子的图像？
哇，这真的把一切都搞砸了
@user979331 如果您提供网页，它可以更快地解决。
让我们continue this discussion in chat。

【解决方案5】：

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

这里是实现纯css视差/半视差的好资源http://thetotobox.com/blog/easy-pure-css-parallax-effect-tutorial/

【讨论】：

【解决方案6】：

好吧，您要做的是让您的移动版本保留与桌面版本一样的视差效果，同时保持对跨浏览器支持的响应能力。可以通过将以下 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;
}

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

【讨论】：

【解决方案7】：

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

【讨论】：