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

Question

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

Answer 1

这是另一种方法，它不使用“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>

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

Answer 3

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

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

然后你去。

Answer 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中，图像已经修复。你想要实现这样的目标吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

我相信你想要实现视差效果。不幸的是，使用position：fixed是无法实现的。就像其他人提到的那样，背景附件：修复可能有所帮助。

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

Answer 6

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

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

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