4

我想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>标签达到预期的效果？

4

2 回答 2

5

您可能正在寻找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>

除此之外，您可以使用 inlinestyle="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

于 2017-01-27T18:13:09.063 回答
1

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>

于 2017-01-27T20:02:50.783 回答