背景图像在 Safari 和 iOS 中未显示全宽

Posted

技术标签:

【中文标题】背景图像在 Safari 和 iOS 中未显示全宽【英文标题】：Background image not showing full width in Safari as well as iOS 【发布时间】：2017-03-29 13:15:16 【问题描述】：

我已将背景图片添加为全屏。它适用于 Chrome 和 Firefox。但是在 Safari 中，背景图像不是全屏的，而是看起来被裁剪了。同样的症状适用于我的 Mac 上的 Safari 以及 ios (iPad/iPhone)。 Safari 中的视图如下所示。

/* Body Margin*/

body 
  margin: 0;



/*  Font family avenir-light*/

@font-face 
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');



/* Background Div*/

.background 
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */



/* Background Div: after*/

.background:after 
  position: absolute;
  width: 100vw;
  height: 100vh;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/



/* Fade in animations */

@keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Firefox < 16 */

@-moz-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Internet Explorer */

@-ms-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Opera < 12.1 */

@-o-keyframes fadein 
  opacity: 0.2;


to 
  opacity: 1;



/* Foregraound div */

.foreground 
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;



/* Name Tag */

.name-tag 
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;



/* Socail Media List*/

.social-media-list 
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;



/* Socail Media Item*/

.social-media-link img 
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;


.social-media-link img:hover 
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */



/* Copyright*/

.copyright 
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">&copy; Copyright @ 2017</div>
</body>

</html>

【问题讨论】：

【参考方案1】：

将此添加到.background:after 

left:0,
right:0 


/* Body Margin*/

body 
  margin: 0;



/*  Font family avenir-light*/

@font-face 
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');



/* Background Div*/

.background 
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */



/* Background Div: after*/

.background:after 
  position: absolute;
  width: 100vw;
  height: 100vh;
  left:0;
  right:0;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/



/* Fade in animations */

@keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Firefox < 16 */

@-moz-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Internet Explorer */

@-ms-keyframes fadein 
  from 
    opacity: 0.2;
  
  to 
    opacity: 1;
  



/* Opera < 12.1 */

@-o-keyframes fadein 
  opacity: 0.2;


to 
  opacity: 1;



/* Foregraound div */

.foreground 
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;



/* Name Tag */

.name-tag 
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;



/* Socail Media List*/

.social-media-list 
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;



/* Socail Media Item*/

.social-media-link img 
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;


.social-media-link img:hover 
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */



/* Copyright*/

.copyright 
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">&copy; Copyright @ 2017</div>
</body>

</html>

【讨论】：

以上是关于背景图像在 Safari 和 iOS 中未显示全宽的主要内容，如果未能解决你的问题，请参考以下文章

iOS上的safari中未显示电话号码

safari 14.2 中未显示着色器材质

身体上设置的背景图像被切断的问题 - iOS/Safari

div背景图像和iOS Mobile Safari兼容性问题

防弹背景图像在 Outlook 中未正确显示 - 电子邮件

div全宽的响应式背景图像