内联 <img> 标签上的 Linear-gradient()

Question

我想linear-gradient在图像上创建这种效果：

我试过这个代码：http : //codepen.io/anon/pen/dNZoeJ

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://unsplash.it/1200x800') center center no-repeat;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}

<div class="bg-img"></div>

但是我的图像是内联的而不是背景的，所以这是行不通的。

<% review.forEach(function(review) { %>
      <div class="col-md-4 col-sm-6">

        <div class="thumbnail">
          <div class="img">
            <a href="/review/<%= review._id %>"><img src="<%= review.image %>"></a>
          </div>

        </div>

        <div class="caption">
            <a href="/review/<%= review._id %>"><h2><%= review.title %></h2></a>
        </div>

        <span><%= review.created.toDateString(); %></span>

        <div class="relative">
            <p><%- review.body.substring(0,250); %></p>
            <div class="absolute"></div>
        </div>

      </div>
 <% }) %>

有什么办法可以用内联<img>标签达到预期的效果吗？

Answer 1

您可能正在寻找objcet-fit内嵌图像。它的工作原理类似于background-size. 请注意，它还不适用于 IE 和 Edge。

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}
.bg-img {
  height: 100%;
  position: relative;
}
.bg-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}

除此之外，您可以使用内联style="background: ..."或者<style>...</style>如果容器具有已知的宽度和高度。

编辑

我做了一个简单的演示，带有<img>像您发布的图片这样的标签，如果您需要支持更多浏览器，请切换到我上面提到的背景图片。

<div class="bg-img">
  <img src="http://unsplash.it/1200x800">
</div>

.hero {
  display: flex;
  height: 200px;
}
.hero div {
  position: relative;
}
.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.hero h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-weight: normal;
  margin: 10px;
}
.a, .b {
  flex: 1;
}
.b {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b1, .b2 {
  height: 50%;
}
.a:before,
.b1:before,
.b2:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}

js小提琴