如何在图像后面添加背景方块？

Question

我正在尝试重新创建这个：

但我没能做到。我尝试在 img 上添加 :before 但这不起作用。你会怎么做这个。它必须以背景不大于图像的方式进行响应。

搜索引擎优化并不重要，所以 background-image 或任何对我来说都很好的东西。

用 SCSS 编写 - 可以更改 HTML

ROB 答案的更新代码

这是我目前的代码

.imgbox {
        padding: 5%;
        position: relative;
        height: auto;

        .backdrop {
            position: relative;
            min-width: 100px;
            min-height: 100px;

            div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                background: rgb(208, 0, 0);
                background: linear-gradient(
                    90deg,
                    rgba(208, 0, 0, 1) 0%,
                    rgba(149, 0, 0, 1) 100%
                );

            }
                transform: translateX(-5px) translateY(5px);
        }

        .img {
            width: 100%;
            height: auto;
            transform: translateX(5px) translateY(-5px);
        }
    }

        <div className="imgbox">
            <div className="backdrop">
                <div></div>
            </div>
            <img
                className="img"
                src={'https://source.unsplash.com/400x250'}
                alt="test"
            >
        </div>

Answer 1

盒子阴影很简单。

父级中的填充是为了防止它裁剪阴影。

.imgbox {
  padding: 0 0 30px 30px;
}

.imgbox .img {
  display: inline-block;
  box-shadow: -30px 30px 0 rgb(208, 0, 0);
}

<div class="imgbox">
      <img
          class="img"
          src='https://source.unsplash.com/400x250'
          alt="test"
      />
</div>

Answer 2

使用pseudo-element 很容易获得渐变：

.image-container::after {
  content:'';
  position: absolute;
  z-index:-1;
  bottom:-24px;
  left:-24px;
  width:100%;
  height:100%;
  background: linear-gradient(red, firebrick); 
}

您可以分别使用background、left 和bottom 更改渐变和偏移。我不确定右上角是否还有第二个渐变？如果是这样，您将其与::before 配对以获得第二个背景，并与z-index 一起玩以获得正确的排序。

请记住 - 要使绝对定位的伪元素起作用，您需要在父容器上设置 position:relative，并在 content:'' 上设置；

Codepen here.