如何在css中制作响应式45度图像叠加

Question

我实际上不知道如何css覆盖像这样的全宽幻灯片（附图片）。我已经尝试了很多转换和旋转的想法，但在响应式视图上失败了。感谢任何提示和帮助！

Answer 1

你可以用渐变来做到这一点。只需调整图像比例的渐变。

.image {
  display:inline-block;
  position: relative;
  width:100%;
}

.image img {
  position: relative;
  z-index: 1;
  width:100%;
}

.image:after {
  position:absolute;
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  bottom: 4px;
  left: 0;
  z-index: 2;
  background: linear-gradient(33.5deg, rgba(255, 50, 54, 0.5) 0%, rgba(255, 26, 28, 0.5) 49.9%, rgba(255, 25, 27, 0) 50%, rgba(255, 0, 0, 0) 100%);
}

<div class="image">
  <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>

Answer 2

一个简单的linear-gradient，你得到了它：

＆＃13;

＆＃13;

.box {
  height:300px;
  background:
   linear-gradient(to bottom left,transparent 50%,rgba(255,0,0,0.8) 50.5%),
   url(https://picsum.photos/2000/1000?image=1069) center/cover no-repeat;
}

＆＃13;

<div class="box">

</div>

＆＃13;

＆＃13;

＆＃13;

用简单的图像：

＆＃13;

＆＃13;

.box {
  position: relative;
}
.box img {
  width:100%;
  display:block;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(to bottom left, transparent 50%, rgba(255, 0, 0, 0.8) 50.5%);
}

＆＃13;

<div class="box">
  <img src="https://picsum.photos/500/200?image=1069">
</div>

＆＃13;

＆＃13;

＆＃13;