视差功能 - Html/Css

我正在我的个人网站上工作。视差功能 - Html/Css

我不明白为什么视差功能的图像没有出现在除了浏览器之外的任何东西。

例如，在我的手机上它不起作用，在Safari浏览器上它不起作用。

一切都被正确标记。

我已经将bootstrap添加到文件中。

问题：This is the problem.... 预期结果：What I want (What appears on my chrome browser)

此溶液固定的问题Safari的，但不移动。

HTML：

<div class ="body container"> 
    <!-- Parallax Feature --> 
</div> 
<div class="body container flex flex-horizontal-center flex-direction-col"> 
    <!-- Main Body --> 
</div>

旧的HTML：

<!-- Div class for the whole page. --> 
<div class="body flex flex-horizontal-center flex-direction-col container"> 

<!-- Home Page --> 
<!-- Parallax Feature --> 
<section class="parallax"> 
    <div class="parallax-inner"> 
    <h5>Dominique Charlebois</h5> 
    </div> 
</section> 
</div>

CSS：

/* Css Styling */ 

/* Global */ 
*{ 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
/* Body */ 
body{ 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
} 
.body{ 
    padding-top: 15px; 
} 
/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%; 
} 
.parallax-inner{ 
    margin-top: 5em; 
    padding-top: 25%; 
    padding-bottom: 25%; 
} 
h5{ 
    margin: auto; 
    text-align: center; 
    font-size: 275%; 
    color: #E5e5e5; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

来源

2016-03-27 Dominique

请在此处添加有意义的代码和问题描述。请不要链接到需要修复的网站 - 否则，一旦问题得到解决，或者您链接到的网站无法访问，此问题将对未来的访问者失去任何价值。发布 [最小，完整和可验证示例（MCVE）]（http://stackoverflow.com/help/mcve）显示您的问题将帮助您获得更好的答案。欲了解更多信息，请参阅 [我网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

@ j08691，好的，我更新了我的问题。谢谢。 – Dominique

/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
}

背景尺寸：盖;

解决问题。问题在于图像在所有屏幕尺寸上都没有适当调整大小。

来源

2016-05-27 17:42:02 Dominique

可悲的是我有太少的声誉发布这个，因为它属于的地方评论，所以我会把它作为答案发布。检出Can i use..，一个HTML5支持表。我怀疑使用EM，以及任何CSS后面的组合

class="body flex flex-horizontal-center flex-direction-col container"

成为您的问题的原因。

来源

2016-03-28 17:09:27 ionree

所以...我试图摆脱“flex flex-horizontal-center和flex-direction-col”，它现在似乎可以在Safari上运行。 HTML： '

' 但是它仍然无法在手机上正常工作。 – Dominique

移动版Safari通常使用旧版WebKit（渲染引擎），而移动版Chrome则使用相当新的版本，而移动版Chrome通常是最新最好的版本。如果支持移动Safari并非关键任务，我只能拭目以待。 – ionree

感谢您提供的信息，它确实很难让每个设备都可用/看起来很好。 – Dominique

我认为它不适用于手机上的Safari &，因为您使用的是背景的简写。有些浏览器不完全支持它。
也许如果你拆分它可能工作的属性。

上一个：

background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%;

后：

background: 50% url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
background-attachment: fixed;

来源

2016-03-28 17:10:46 Mamboleoo

所以没有解决问题，但很高兴知道。 – Dominique

视差功能 - Html/Css

回答

相关问题