Question

我希望能够在div内显示整个图片。

我在显示background-size属性设置为contain的图片时遇到困难 - 它不会以源图像的完整大小显示整个图像，只显示中心。

代码

＆＃13;

#header {
    background: rgba(0, 0, 0, 0.8);
    color: #ccc;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 20px 0;
}

#header .logo {
    width: calc(100%/3);
    height: 75px;
    margin: 0 auto;
    background-size: contain;
    background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
}

＆＃13;

<div id="header">
  <div class="logo"></div>
</div>

＆＃13;

Answer 1

这是因为你覆盖了第一个属性，你必须在background-size之后移动background属性，如下所示：

#header .logo {
    background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
    background-size: contain;
}

这是因为简写背景属性将覆盖所有前面的background- *属性，无论它们是否包含在速记中。

毛茸茸评论

Answer 2

样式将从上到下应用，因此样式background-size:contain;会被background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;

中描述的位置覆盖

您需要在background-size:contain;下方添加background:。 Updated Fiddle

＆＃13;

#header {
  background: rgba(0, 0, 0, 0.8);
  color: #ccc;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 20px 0;
}
#header .logo {
  width: calc(100%/3);
  height: 75px;
  margin: 0 auto;
  background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
  background-size: contain;
}

＆＃13;

<div id="header">
  <div class="logo"></div>
</div>

＆＃13;

Answer 3

您需要在背景

之后添加background-size:contain;

#header {
background:rgba(0, 0, 0, 0.8);
color:#ccc;
text-align:center;
position:absolute;
top:0;
left:0;
width:100%;
z-index:3;
padding:20px 0;
}
#header .logo {
width: calc(100%/3);
height:75px;
margin: 0 auto;
background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
background-size:contain;
}

Answer 4

使用'contains'或'cover'指定背景大小背景大小的另外两个可能值是关键字contains和cover。如果使用包含关键字，则缩放背景图像，同时保留图像的原始比例/宽高比，以便尽可能大，只要它包含在背景定位区域内，即。图像的宽度或高度都不超过背景定位区域。这样，取决于背景图像的比例是否与背景定位区域的比例匹配，可能存在背景的一些区域未被背景图像覆盖。如果使用封面关键字，则缩放背景图像，再次保留图像的原始比例/宽高比，此时间尽可能大，使得背景定位区域完全被背景图像覆盖，即。图像宽度或高度均等于或大于背景定位区域。因此，再次取决于背景图像的比例是否与背景定位区域的比例相匹配，背景图像的某些部分可能不在背景定位区域内的视野中。

＆＃13;

#header {
  background: rgba(0, 0, 0, 0.8);
  color: #ccc;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 20px 0;
}
#header .logo {
  width: calc(100%/3);
  height: 75px;
  margin: 0 auto;
  background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
  -webkit-background-size: contain;
          background-size: contain;
}

＆＃13;

<div id="header">
  <div class="logo"></div>
</div>

＆＃13;

Answer 5

更改位置背景大小和背景。

写下这样的东西：

background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
background-size: contain;

这是因为background属性会覆盖background-size：）

CSS属性＆＃39;包含＆＃39;不工作

5 个答案: