Question

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

我尝试了这段代码：http://codepen.io/anon/pen/dNZoeJ

＆＃13;

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

＆＃13;

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

＆＃13;

但是我的图片不是背景内容，因此无法正常工作。

<% 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（为线性渐变的大小和应用不同的方向）。

您可以在伪＆＃39; sparent上设置线性背景，当图像加载或丢失时，它将被看到并增加。

您可以添加插入阴影以查看图像上的某些边缘。

...

例如

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: