html - 非矩形图像叠加

Question

我似乎无法弄清楚这一点。我有一张 100% 填充图像的 Bootstrap 卡。在图像的顶部，我有一些文本，通过使用透明的矩形覆盖层可以清楚地看到这些文本。我希望透明矩形覆盖层倾斜，这样我就能得到与 https://www.evensi.com 上的卡片类似的效果。主页。

我的卡片 HTML

<div class="card border-0" style="width:100%;">
<img class="card-img-top" src="IMAGE HERE" alt="Card image">
<div class="card-img-overlay">
</button>
<div class="bottom text-light">
SOME TEXT OVER IMAGE HERE
</div>
</div>
</div>

卡片样式

    .card {
        box-shadow: 1 3px 1px 1 rgba(1, 1, 3, 0.6);
        transition: 0.3s;
        width: 100%;
        border-radius: 15px;
        padding: 3px;
    }

    .card:hover {
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4);
    }

    /* Card image dark filter */
    .card-img-top {
        width: 100%;
        height: 350px;
        object-fit: cover;
        /* photo brightness */
        filter: brightness(85%);
        border-radius: 15px;
        padding: 2px;
    }

    /* Align heading text to bottom of photo */
    .bottom {
        position: absolute;
        right: 0;
        left: 0;
        padding: 15px;
        bottom: 0px;
        padding-bottom: 15px;
        /* shaded filter overlay */
        background-color: rgba(12, 23, 23, 0.6);

        /* background-color: black; */
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

Answer 1

拥有倾斜容器的 3 种方法:

• 使用变换:旋转()；在与文本容器分开的元素上。
• 使用伪元素::before 或::after
• 使用 .png 文件的背景图像，以便您的文本容器具有透明度。

伪元素::before 和::after 必须附加到所需的元素，例如 div。它们还必须具有 content 属性，否则它们根本不会显示。

div::before {
  content: "";
}

它们的父元素被认为是它们所附加的元素，在本例中为 div。因此，您可以轻松地使用绝对定位来根据需要定位它。

我用卡片示例做了一个 fiddle 。 https://jsfiddle.net/vbgrn98s/1/

您将不得不使用 border-width 属性来调整它的大小以适合您。