높이는 다르지만 너비는 일정한 CSS 이미지 오버레이를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

높이는 다르지만 너비는 일정한 CSS 이미지 오버레이를 만드는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-30 10:09:27

원래의

480명이 탐색했습니다.

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

이미지의 CSS 오버레이: 종합 가이드

소개

이미지 오버레이를 만드는 방법은 다음과 같습니다. 웹 디자인의 일반적인 작업입니다. 이미지 위에 텍스트, 아이콘 또는 기타 정보를 추가하여 시각적으로 매력적이고 유익한 효과를 만들 수 있습니다. 이 기사에서는 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>

로그인 후 복사

오버레이 향상

오버레이 모양을 개선하기 위해 CSS 스타일을 추가할 수 있습니다. 예:

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

로그인 후 복사

이렇게 하면 오버레이 콘텐츠가 하단에 수직으로 정렬됩니다.

맞춤형 데모

여기에 extra와 관련된 더 자세한 데모가 있습니다. 아이콘 및 텍스트와 같은 스타일 지정:

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!