内联 <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%;
}

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;
}

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

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

编辑

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

.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;
}

<div class="hero">
  <div class="a">
    <img src="http://unsplash.it/600x300?random">
    <h2>Title</h2>
  </div>
  <div class="b">
    <div class="b1">
      <img src="http://unsplash.it/600x400?random">
      <h2>Title</h2>
    </div>
    <div class="b2">
      <img src="http://unsplash.it/600x500?random">
      <h2>Title</h2>
    </div>
  </div>
</div>

jsFiddle

Answer 2

CSS 可以胜任。

这个伪想法对我来说似乎不错，你应该使用 pointer-events 允许点击它。

您可以使用 rgba() 颜色代替不透明度。

您可以自己使用 display:flex 绘制列或 float ...

您可以使用 select 或 nth-child() 到 select 首先和奇数 .thumbnails （调整大小并为线性渐变应用不同的方向）。

您可以在pseudo'sparent上设置线性背景，它会在图片加载或丢失时看到并增加。

您可以添加内嵌阴影以查看图像的一些边缘。

...

例子

html,
body {
 width: 100%;
 height: 100%;
}

.thumbnail:before {
 content: '';
 top: 0;
 left: 0;
 position: absolute;
 width: 100%;
 height: 100%;
 background: inherit;
 box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.25);
 pointer-events: none;
 /* allows to click under it */
}

.box {
 display: flex;
 flex-flow: column wrap;
 height: 200px;
 width: 600px;
 margin: auto;
 overflow: hidden;
 box-shadow:0 0 0 1px  rgba(0, 125, 255, 1);
}

.box > .thumbnail {
 flex: 1;
 min-height:100px;
 max-height: 100px;
 width: 200px;
 max-width: 200px;
 position: relative;
 background: linear-gradient(to bottom right, rgba(0, 125, 255, 0.5), rgba(255, 125, 0, 0.5));
}

.box > .thumbnail:first-of-type {
 min-height:200px;
 max-height: 200px;
 max-width: 200px;
}

.box > .thumbnail:nth-child(odd) {
 background: linear-gradient(to top left, rgba(0, 125, 255, 0.5), rgba(255, 125, 0, 0.5));
}

.img,
.img a {
 display: block;
 height: 100%;
 width: 100%;
}

.img a img {
 width: 100%;
}


/* demo purpose*/

body {
 display: flex;
 margin: 0;
}

<div class="box">
  <div class="thumbnail">
    <div class="img">
      <a href="/review/<%= review._id %>">
        <img src="http://unsplash.it/1200x800" />
      </a>
    </div>
  </div>
  <div class="thumbnail">
    <div class="img">
      <a href="/review/<%= review._id %>">
        <img src="http://unsplash.it/1200x802?random" />
      </a>
    </div>
  </div>
  <div class="thumbnail">
    <div class="img">
      <a href="/review/<%= review._id %>">
        <img src="http://unsplash.it/1200x801?random" />
      </a>
    </div>
  </div>
  <div class="thumbnail">
    <div class="img">
      <a href="/review/<%= review._id %>">
        <img src="http://unsplash.it/1200x800?random" />
      </a>
    </div>
  </div>
  <div class="thumbnail">
    <div class="img">
      <a href="/review/<%= review._id %>">
        <img src="http://unsplash.it/1201x799?random" />
      </a>
    </div>
  </div>
</div>

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

Linear-gradient() over inline <img> tags

html

css

css-gradients