Question

我想用一张照片img填充div的背景，类似于你使用CSS背景大小封面的方式;但在这种情况下，它需要是一个img，因为这是页面内容，最终将来自我们的CMS。以下是我到目前为止的内容：http://codepen.io/anon/pen/XmBRPR?editors=110#0 这就是我希望它看起来像但我不想使用CSS背景：http://codepen.io/anon/pen/GpBmYz?editors=110 我没有使用Less，我的HTML比setting an image to fill the background of a div

更基本

  <aside class="row cross-link">
    <div class="col-xs-12">
    <a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
    <a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
    <a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
 </div>

 </aside>

和

.cross-link {
  background-color: #7bafd0;
  padding-right: 4%;
  padding-left: 4%;
  text-align: center;
}

a.cross-link-item {
  margin: 10px;
  padding: 0;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #1f26ab;
  background-size: cover;
}

.cross-link-text {
  margin: 8px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.59);
  color: #FFF;
}

Answer 1

通过相对于div定位文本和图像并在div上指定宽度和高度，可以实现期望的效果。

查看代码笔：http://mbs.red/postion

使用<img/>填充div的背景

1 个答案: