Question

我想让div的背景图像响应。我使用了bootstrap 3.3 我为背景图像编写了自己的CSS。我的代码如下。

.search-row-wrapper
{
  background:url(../../Images/frontend/MassageBanner.jpg );
  background-size: cover;
  height:400px;
  padding:50px 0;
  transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;
  -webkit-transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;width:100%;
}

我已经完成了来自stackoverflow的相同问题链接，但它们并不适合我。 Link1 Link2

Answer 1

你只是缺少background-position: center;，其余的是完美的

Answer 2

方法1：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于：

Safari 3+

Chrome Whatever +

IE 9 +

Opera 10 +

方法2：

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

适用于：

Safari / Chrome / Opera / Firefox / IE 9

IE 6：Borked - 但如果使用某种固定定位垫片，可能还可以修复

IE 7/8：主要是工作，不以小尺寸为中心，但填充屏幕

有关方法的详细信息， This article 对您的提问非常有用。

如何使div背景图像响应？

2 个答案: