如何創建高度不同但寬度一致的 CSS 圖像疊加？-css教學-PHP中文網

如何創建高度不同但寬度一致的 CSS 圖像疊加？

Patricia Arquette

發布： 2024-10-30 10:09:27

原創

479 人瀏覽過

How to Create a CSS Image Overlay with Different Heights but Consistent Width?

圖片上的CSS 疊加：綜合指南

簡介

建立影像疊加層

為了實現這種效果，我們將使用 div 容器來保存影像和覆蓋內容。以下CSS 規則將建立疊加層：

.image-container {
    position: relative;
    width: 200px;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

登入後複製

HTML 結構

HTML 結構將包含影像和疊加層內容：

<div class="image-container">
    <img src="image.jpg">
    <div class="after">This is some content</div>
</div>

登入後複製

增強疊加層

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

登入後複製

為了改善疊加層的外觀，我們可以加入其他CSS 樣式。例如：

這將垂直對齊底部的覆蓋內容。

自訂演示

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}

.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}

.image-container .after .zoom:hover {
    color: #FFF;
}

登入後複製

這是一個更複雜的演示，帶有額外的內容樣式，例如圖標和文字：

<div class="image-container">
    <img src="image.jpg">
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom"><i class="fa fa-search"></i></span>
    </div>
</div>

登入後複製

此更新的演示在疊加層中添加了一個動畫縮放圖標，提供了額外的視覺趣味。

以上是如何創建高度不同但寬度一致的 CSS 圖像疊加？的詳細內容。更多資訊請關注PHP中文網其他相關文章！