Question

我有一个带背景图像的div。 Div的宽度为20％ - 我希望它根据用户分辨率改变其大小。问题是我无法强制背景图像缩放约束比例。而且，我有一个标签 - 我希望我被放置在第一个div的底部。

这是我想要完成的事情：

enter image description here

我的代码：

 <a href="">
        <div class="box">
            <div class="label">Beijing</div>
            <div class="description">August 2014</div>
        </div>
    </a>

我的CSS：

.box {
    float: left;
    width: 19.60%;
    margin-left:0.40%;
    margin-top:10px;
    text-align:center;
    background-image: url("beijing.png");
    background-size: cover;
}

.label {
    font-size:28px;
    color:#fff;
    font-family:Roboto;
    font-weight:300;
    background-color: rgba(60, 60, 62, 0.5);
}

.description {
    font-size:12px;
    color:#fff;
    font-family:Roboto;
    font-weight:300;
    background-color: rgba(60, 60, 62, 0.5);
    text-transform:uppercase;
}

Answer 1

我查看了您的代码，似乎您没有为.box指定高度 - 因此这会导致内容折叠到内容的高度，从而完全遮盖背景图像。

我可以建议您使用.box元素的padding bottom hack to dictate a fixed aspect ratio的组合，以及将元数据（标签和位置）包装在另一个元素中，然后绝对定位在框内。

＆＃13;

.box {
  float: left;
  width: 19.60%;
  margin-left:0.40%;
  margin-top:10px;
  text-align:center;
  background-image: url("https://download.unsplash.com/photo-1426200830301-372615e4ac54");
  background-size: cover;
  position: relative;
  padding-bottom: 19.60%;
}
.meta {
  background-color: rgba(0,0,0,.75);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.label {
  font-size:28px;
  color:#fff;
  font-family:Roboto;
  font-weight:300;
  background-color: rgba(60, 60, 62, 0.5);
}

.description {
  font-size:12px;
  color:#fff;
  font-family:Roboto;
  font-weight:300;
  background-color: rgba(60, 60, 62, 0.5);
  text-transform:uppercase;
}

＆＃13;

<a href="">
  <div class="box">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
      </div>
  </div>
</a>

＆＃13;

更好：我知道这可能不是您正在寻找的东西，但不是使用百分比来指示边距，然后小心地从小数宽度中减去它，你可以做什么do只是使用CSS flexbox或CSS列来完成繁重的工作（取决于您希望元素流向哪个方向）。

此外，使用CSS单独指定每个.box元素的背景图像可能太费力了。您可以将背景图像存储为HTML5 data-属性值，然后使用JS（在这种情况下我将使用jQuery使代码更具可读性，但原始JS方法完全可行）来分配背景图像迭代。

＆＃13;

$(function() {
  $('.box').each(function() {
    $(this).css('background-image', 'url('+$(this).data('bg')+')');
  });
});

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.box {
  display: block;
  margin: 5px;
  width: calc(20% - 10px);
  padding-bottom: 19.60%;
  text-align:center;
  background-size: cover;
  position: relative;
}
.meta {
  background-color: rgba(0,0,0,.75);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.label {
  font-size:28px;
  color:#fff;
  font-family:Roboto;
  font-weight:300;
  background-color: rgba(60, 60, 62, 0.5);
}

.description {
  font-size:12px;
  color:#fff;
  font-family:Roboto;
  font-weight:300;
  background-color: rgba(60, 60, 62, 0.5);
  text-transform:uppercase;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1426200830301-372615e4ac54">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1423683249427-8ca22bd873e0">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421091242698-34f6ad7fc088">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421809313281-48f03fa45e9f">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421757295538-9c80958e75b0">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421940975339-33bdde74a873">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421977870504-378093748ae6">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421930451953-73c5c9ae9abf">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1422310299561-e3b8b45d859f">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
  <a href="" class="box" data-bg="https://download.unsplash.com/photo-1423483641154-5411ec9c0ddf">
    <div class="meta">
      <div class="label">Beijing</div>
      <div class="description">August 2014</div>
    </div>
  </a>
</div>

＆＃13;

图片由https://unsplash.com/提供。

背景图像 - 约束比例

1 个答案: