背景滑块在移动设备上变形。（WordPress）答案

【问题标题】：Background slider is distorted on mobile. (WordPress)背景滑块在移动设备上变形。（WordPress）
【发布时间】：2014-06-14 17:24:57
【问题描述】：

我是我网站背景的整页滑块，它在台式机上效果很好。但是，当我切换到移动设备时，图片严重失真，并且页面左侧有一个黑色间隙，看起来一点都不好看。

查看所附照片以获得视觉效果或将其拉到手机上，网址是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;
}

仅 CSS 最大宽度为 767 像素：

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

【问题讨论】：

您使用的是什么滑块，您可以发布 css 吗？
我正在为一个名为最后通牒的主题使用滑块，我手头也有革命滑块，但设置为整页本身就很痛苦。我会将 css 添加到我的原始帖子中。
如果您只使用一页，则无需使用滑块作为背景。浏览滑块代码来编辑调整大小时无法正确响应的原因是浪费时间。只需按照我在答案中发布的操作，它应该可以正常工作。
如下所述，我知道如何设置页面的背景。我不知道如何将其固定到设定位置
好的，所以现在背景只覆盖了手机屏幕的一半，并且没有固定（在桌面上工作正常）。我对其进行了更新，以向您展示身体背景图像的当前 css。

标签： html css wordpress responsive-design

【解决方案1】：

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

如果要使用图像，请使用 css，这样它就不会通过使用 background-attachment 滚动。

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

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

更新

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

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

除此之外我不知道如何

【讨论】：