Question

我正在编辑一个在CSS中插入主页背景图片的网站模板。图像在移动设备上无响应。 CSS指向特定部分而不是特定图像。所以我猜这就是为什么它不起作用。但我不知道如何将响应式CSS指向图像，而不是HTML。如何使图像响应？谢谢！

```

#slider {
  background: url("../img/helloquence-61189.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 10% 0%;
  padding: 200px 0 280px 0;
  position: relative;
  width: 100%;
  height: auto;
}

```

Answer 1

试试这个

#slider{
  background: url("../img/helloquence-61189.jpg") no-repeat;
  background-size: 100% 100%;
}

Answer 2

使用background-image：包含而不是封面

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <style type="text/css">
    #slider {
  background: url("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: 10% 0%;
  padding: 200px 0 280px 0;
  position: relative;
  width: 100%;
  height: auto;
}  
  </style>
<div id=slider>
</div>
</body>
</html>

Answer 3

试试这个

#slider {
  background: url("../img/helloquence-61189.jpg") no-repeat; 
  background-size: 100% 100%; background-attachment: fixed; background-
  position: center center; position: relative;
  width: 100%;
}

当它位于CSS而不是HTML中时，如何使图像响应？

3 个答案: