Question

这是我的css代码：

body {
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
background: #861520;
}

#footer-content {
  width: 100%;
  height: 334px;
  padding-bottom: 20px;
  background: url('../img/footer-image.png') repeat-x;
  background-size: 100% 100%;
}

footer-image.png的宽度为1400px，但如果屏幕分辨率大于1400px，则图片不会重复。

Answer 1

使用background-size: 100% 100%;意味着图片会自动缩放以适合其容器。

如果删除此样式，则应该看到图像重复。

如果您希望它缩放到页脚的高度，那么您可以尝试设置样式background-size: auto 100%;

Answer 2

我认为继承的样式会阻止图像重复，因此请尝试删除100％

Answer 3

试试此代码

body {
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
background: #861520;
}

#footer-content {
  width: 100%;
  height: 334px;
  padding-bottom: 20px;
  border:1px solid;
  background:url(beautiful-life-hd-hd-wallpapers.jpg) repeat-x;
  background-size:auto;
}

好像你会把背景大小100％100％那么它会传播x * y如果你会做100％全部所以试试这个并且可能已经回答了但是我想现在你会理解.. .thanx

重复x页脚背景

3 个答案: