CSS position fixed不会出现在手机上_Css

CSS position fixed不会出现在手机上

css

CSS position fixed不会出现在手机上,css,Css,我有一个类似于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; }

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

新答案：
如果将CSS添加到图像中。它创造了你需要的视差效果
background-attachment: fixed;
position: fixed !important;
object-fit: cover;
height:100%;

它应该同样插入到图像
元素中
<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%;
">

请让我知道这是否解决了您的问题
旧答案：
在您在问题中提供的初始CSS中，图像已经修复。你是不是想达到这样的目标

。面板图像{
背景位置：中心；
背景重复：无重复；
-webkit背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
高度：200px；
位置：绝对位置；
顶部：0px；
}
.第217小组{
位置：相对位置；
}
.参赛内容{
利润上限：200px；
}

我们的饮料
咖啡加浓咖啡
滴咖啡2.50美元
浓缩咖啡镜头3.00美元
Americano4.50美元
卡布奇诺4.50美元
马基雅托4.50美元
Cortado4.50美元
纯白5.00美元
拿铁4.50美元

热的还是冰的
摩卡4.50美元

热的还是冰的
冷酿4.00美元

普通还是硝基
其他饮料
柴4.50美元
冰茶3.50美元

绿色、黑色或白色
热茶<3.00美元

英式早餐，锡兰，绿色，白色，洋甘菊，露易波斯，桃子
调味苏打水<4.00美元

覆盆子、蓝莓、桃子、芒果、香草、薄荷
如果我理解了你的问题，你想这么做吗

。面板图像{
背景位置：中心；
背景重复：无重复；
-webkit背景尺寸：封面；
背景尺寸：封面；
位置：固定；
宽度：100%；
高度：200px；
z指数：-1；
排名：0；
左：0
}
.第217小组{
溢出：隐藏；
位置：相对位置；
}
.小组内容{
背景色：#fff；
利润上限：200px；
填充物：0.1em 1.5em；
}

我们的饮料
咖啡加浓咖啡
滴咖啡2.50美元
浓缩咖啡镜头3.00美元
Americano4.50美元
卡布奇诺4.50美元
马基雅托4.50美元
Cortado4.50美元
纯白5.00美元
拿铁4.50美元

热的还是冰的
摩卡4.50美元

热的还是冰的
冷酿4.00美元

普通还是硝基
其他饮料
柴4.50美元
冰茶3.50美元

绿色、黑色或白色
热茶<3.00美元

英式早餐，锡兰，绿色，白色，洋甘菊，露易波斯，桃子
调味苏打水<4.00美元

覆盆子、蓝莓、桃子、芒果、香草、薄荷
只需使用背景附件：固定
这将在移动设备中创建一个简单的视差效果，而不使用JavaScript
，不过只需确保它附加在移动设备上：
// make sure this is mobile width
@media screen and (max-width: 480px) {
  .panel-image {
    background-attachment: fixed;
  }
}

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

。面板图像{
背景位置：中心；
背景重复：无重复；
-webkit背景尺寸：封面；
背景尺寸：封面；
位置：相对位置；
z指数：0；
宽度：100%；
身高：100%；
}
.第217小组{
溢出：隐藏；
位置：相对位置；
高度：400px；
}
.小组内容{
位置：绝对位置；
顶部：0！重要；
左：0！重要；
溢出：自动！重要；
身高：100%；
宽度：100%；
z指数：1；
}
.panel内容>.wrap{
位置：相对位置；
背景：rgba（255255,0.8）；
顶部：200px；
}

我们的饮料
咖啡加浓咖啡
滴咖啡2.50美元
浓缩咖啡镜头3.00美元
Americano4.50美元
卡布奇诺4.50美元
马基雅托4.50美元
Cortado4.50美元
纯白5.00美元
拿铁4.50美元

热的还是冰的
摩卡4.50美元

热的还是冰的
冷酿4.00美元

普通还是硝基
其他饮料
柴4.50美元
冰茶3.50美元

绿色、黑色或白色
热茶<3.00美元

英式早餐，锡兰，绿色，白色，洋甘菊，露易波斯，桃子
调味苏打水<4.00美元

覆盆子、蓝莓、桃子、芒果、香草、薄荷
我相信您希望实现视差效果。不幸的是，这是无法实现的应用位置：固定。正如其他人提到的，背景附件：修复可能会有所帮助
这里有一个很好的资源可以实现纯css视差/半视差好吧，你要做的是让你的移动版本像桌面版本一样保留视差效果，同时保持对Cross0浏览器支持的响应能力。阿比利特酒店
// make sure this is mobile width
@media screen and (max-width: 480px) {
  .panel-image {
    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;
}