html - 背景 slider 在移动设备上失真。 (WordPress)

Question

我是我网站背景的整页 slider ，在桌面上效果很好。但是，当我切换到移动设备时，图片严重变形并且页面左侧有黑色间隙，看起来一点也不好。

查看所附照片以查看视觉效果或将其拉到手机上， 网址是 http://plunderfest.muvltd.com

有什么方法可以用一些 CSS 来解决这个问题吗？

(根据要求编辑)CSS:

#supersized {
display: block;
position: fixed !important;
background-size: cover !important;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}

正文背景图片CSS:

body {
background-image: url(http://plunderfest.muvltd.com/wp-content/uploads/2014/04/starry4.jpg) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: 100% !important;
width: 100% !important;
height: 100% !important;
}

仅限最大宽度为 767px 的 CSS:

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .woocommerce ul.products li.product.one_fourth,
  .woocommerce-page ul.products li.product.one_fourth,
  .woocommerce ul.products li.product.one_third,
  .woocommerce-page ul.products li.product.one_third,
  .woocommerce ul.products li.product.one_half,
  .woocommerce-page ul.products li.product.one_half,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_fourth,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_fourth,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_third,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_third,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_half,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_half,
  .one_sixth,
  .one_fifth,
  .one_fourth,
  .one_third,
  .one_half,
  .two_third,
  .three_fourth {
    display: inline;
    float: left;
    margin-right: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .fimage-align-right,
  .fimage-align-left {
    float: none;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}

Answer 1

如果网站只有一张图片，为什么要使用 slider 作为网站背景？ 我建议不要使用页面 slider 作为背景，而只是通过在 css 中设置样式来使用图像。调整大小时，CSS 中发生了一些事情。如果您设置使用 slider 作为背景，则需要在调整大小时检查它的 css。

如果您想使用图像，请使用 css，这样它就不会通过背景附件滚动。

body {
    background-image: url('your/image/location/image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
} 

有几种方法可以做到这一点，我给你的是使用背景附件的快速说明，而不是用于更改的整个 css。

更新

我明白了。这不是响应能力，因为图像在调整大小时会缩小。尝试调整浏览器的宽度但保持相同的高度。这是因为图像不能同时拉伸(stretch)和调整大小。它将保持正确的宽高比，因此不会扭曲。一个非常快速和简单的解决方法是在照片编辑器中在该图像的最底部放置一个黑色渐变。这将使它看起来像是淡出到站点背景中，并且比在底部有一条硬线要干净得多。如果没有那么小的背景空间场景，它也可能使事情更清晰。除此之外，我不确定如何调整它，如果调整了，它就必须从该图像中拉出困惑以到达底部。

我找到了一些帖子 here人们在那里谈论不同的解决方案，但没有太多关于这方面的信息。尝试环顾四周或看看其他人是否有想法。

除此之外，我不确定如何