内联 <img> 标签上的线性渐变（）

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

您可以使用 nth-child() 等选择器选择第一个和奇数 .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>