Question

我设计了一个响应迅速的网站。我在我的一些网页中使用固定的背景图像。问题是，在移动屏幕上，图像没有响应，它超出边界（内容）。 .. 我用google搜索找出原因，但我找到的唯一方法是将图像转换为wbmp格式。

当我将图像转换为wbmp时，html根本不接受。 .. 是否有想法让图像以响应的方式显示在小屏幕上？或者我应该使用的任何工具？

CSS

body{
    background:url(../images/gallery-1-big.jpg) center center fixed no-repeat;
    background-size:cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-backface-visibility: hidden;
opacity: 0.8;
}

移动屏幕的同一段代码让图像失真，当我尝试下面的代码时，图像只显示在屏幕的上半部分

@media (max-width: 480px) {
body
{
    background:url(../images/gallery-1-big.jpg)  fixed no-repeat;
    background-size:100%;

}

Answer 1

你需要给css ...中的图像赋予宽度：100％和高度：100％

＆＃13;

body
{
   background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

＆＃13;

Answer 2

在这里，您可以查看兼容的image formats。我认为对于背景图片最好使用png格式。

如果您将图片作为背景，则应将backgroud-size设置为cover或100%。

您可以查看website这个非常好的例子。

修改

哎呀，我做了这个fiddle来告诉你发生了什么。当您使用图像作为背景时，它们可以响应，但如果您想要完美契合，则需要图像具有与其容器相同的比例，在您的情况下为body。如果图像具有相同的宽高比，则background-size:100%一切正常。

问题来自于它们的比例不同。如果使用background-size:100%，图像将适合一个维度（宽度或高度），但不能同时适用于两者，因为这会使图像生成拉伸或展开，从而使图像变形。要解决此问题，您可以使用background-size:cover，这将使图像填充所有body，但可能会隐藏图像的某些部分以获得最佳效果。

Answer 3

这应该可以解决问题：

body {
background: url(background-photo.jpg) center center cover no-repeat fixed;}

重要的部分是背景尺寸：封面;它告诉浏览器按比例缩放图像。这取决于您使用的图像。

如果您的图像宽度超过高，它将位于智能手机的边界之外，智能手机处于纵向模式.... 当然，如果您的图像高于宽图像，它会在纵向模式下正确显示，但在横向模式下会出现问题......

如果您使用jpg或png由您决定。看看图片有多大，并选择尺寸较小的格式。

Answer 4

我刚刚错过了这段代码。我把它放在我的CSS的顶部，删除了媒体查询，我的问题得到解决

INSTALL

去在移动屏幕大小的外部内容的背景图象

4 个答案: