Question

我似乎无法弄清楚。我有一张引导卡，其中100％都装有一张图像。在图像的顶部，我有一些文本，使用透明的矩形叠加层可以使它们清晰可见。我希望将透明矩形叠加层倾斜，以便获得与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种方法：

使用变换：rotate（）;在与文本容器分开的元素上。
使用伪元素:: before或:: after
使用.png文件的背景图片，以使文本容器具有透明度。

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

div::before {
  content: "";
}

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

我摆弄了卡片的例子。 https://jsfiddle.net/vbgrn98s/1/

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

非矩形图像叠加

1 个答案: