투명한 배경을 가진 순수한 CSS3 말풍선

간단한 튜토리얼

순수한 CSS3를 사용하여 투명한 배경을 갖춘 말풍선 특수 효과입니다. 이 말풍선은 투명한 png 이미지 2개를 배경으로 사용하고, 간단한 CSS 코드를 통해 말풍선 효과로 결합한 것입니다.

사용 방법

HTML 구조

말풍선의 HTML 구조는 다음과 같습니다.

<a class="speech-bubble" href="#">
    <div class="speech-content">
        lorem ipsum ascilet
    </div>
    <div class="speech-tail"></div>
</a>

CSS 스타일

말풍선 전체를 감싸는 하이퍼링크 요소에서는 하이퍼링크 요소의 표시 속성을 inline-block으로 설정하고, 투명도를 50%로 낮추고, 투명 애니메이션에 애니메이션 전환 효과를 설정합니다.

.speech-bubble {
    display: inline-block;
    opacity:0.5;
    transition: opacity 0.5s;
}

말풍선 위에 마우스를 올리면 하이퍼링크 요소의 투명도가 100%로 돌아갑니다.

.speech-bubble:hover {
    opacity:1;
    transition: opacity 0.5s;
}

.speech-content는 대화 풍선의 콘텐츠 상자 영역으로, 최소 너비 min-width는 80픽셀로 설정되고 내부 여백은 10픽셀로 설정됩니다. 아래쪽 가장자리를 제외한 모든 측면은 3픽셀 흰색 테두리로 설정됩니다. 또한 배경에는 완전히 투명한 PNG 이미지를 사용하세요.

.speech-content {
    display:inline-block;
    min-width: 80px;
    padding:10px;
    text-align:center;
    color:white;
    border: solid white;
    border-width: 3px 3px 0px 3px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIU
    k0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQE
    BAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC') 48px 100% no-repeat;
    background-size: calc(100% - 48px) 50px;
}

.speech-tail은 버블 대화 상자의 꼬리입니다. 고정된 너비와 높이를 설정하고 투명한 PNG 이미지를 배경으로 사용합니다.

.speech-tail {
    height:25px;
    width: 52px;
    margin-top:-3px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAZCAYAAAB+Sg0DAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAIGNIUk0A
    AHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFXSURBVHja1NgxKEVRHMfxc5+QKDHJJqOsyqzMbzApGWwyGGxKWWxSSiZZyKJMFmUyyCqjbD
    KxMFDP+9h0nR7v8fTePb+6wz3//z2nb/fe8//9TwahhcqyLPuPeTAbQjiMx0shQWExhHBQK1ZKEGY1hLATQshauWh8farJeTd91QX6kwNCB/YimFP0JPeG0IXj
    COYIncl9cujFWQSzi1Krf9ymgTCAywhmo107UVNAGMJ1BLPSzq31z0AYwW3ukXcstLtW/AkIY7jPpb9hpgjF79dAmMBjLvUF00Wp5r8CwhSec2lPmCySPWkYCG
    W85lIeMF40v9UQEOZRyYXvMFpEA1kXCMuo5kI3GC6qI/4RCOtRjbnCYJEt/rdA2I7uz9FX9J7lJ6C8TtCdQhPWCNA+OlLpKusBbSELqagO0FqKhxi1gKpYSvFQ
    phZQBXMhVdUAKrdq7Y8BABcTlsw7evjMAAAAAElFTkSuQmCC') top left no-repeat ;
    background-size: 100% 100%;
}

위 내용은 순수 CSS3 배경과 투명 배경을 사용한 말풍선의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!