CSS3는 투명한 배경과 불투명한 텍스트의 효과를 얻습니다.-CSS 튜토리얼-php.cn

CSS3는 투명한 배경과 불투명한 텍스트의 효과를 얻습니다.

不言

풀어 주다： 2018-06-25 15:31:04

원래의

5914명이 탐색했습니다.

이 글에서는 투명한 배경과 불투명한 텍스트를 구현하기 위한 CSS3 샘플 코드에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 참고용으로 올려보겠습니다.

최근 이미지에 반투명 배경의 텍스트를 표시해야 한다는 요구 사항이 발생했습니다. 효과는 다음과 같습니다.

Requirement.png

이 요구 사항을 본 후 첫 번째 반응은 CSS3 불투명도 설정을 사용하는 것이었습니다. 요소의 투명도.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景透明，文字也透明</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            background: url(&#39;https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg&#39;) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }

        .demo {
            position: absolute;
            width: 260px;
            height: 60px;
            top: 260px;
            line-height: 60px;
            text-align: center;
            background-color: black;
            opacity: 0.5;
        }

        .demo p {
            color: #FFF;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <p class="container">
        <p class="demo">
            <p>2018世界杯已开幕：10天</p>
        </p>
    </p>
</body>

</html>

로그인 후 복사

효과는 다음과 같습니다.

배경이 투명하고 텍스트도 투명합니다.png

이것은 요구 사항을 충족하는 것 같지만 불투명도를 설정한 후 완벽하지는 않습니다. 전체 요소가 반투명해져서 텍스트가 모호해 보이고 이 해결 방법은 권장되지 않습니다.

사실 투명한 CSS를 구현하는 유일한 방법은 불투명도를 설정하는 것입니다. 두 가지 다른 유형이 있습니다:

css3의 rgba(red, green, blue, alpha), alpha의 값은 rgba(255,255,255,0.8)
IE 독점 필터 필터와 같이 0에서 1입니다. Alpha(불투명도=x), x 값의 범위는 0에서 100입니다. 예를 들어 filter:Alpha(opacity=80)

여기서는 rgba:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景透明，文字不透明</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            background: url(&#39;https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg&#39;) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }

        .demo {
            position: absolute;
            width: 260px;
            height: 60px;
            top: 260px;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0,0,0,0.5);
        }

        .demo p {
            color: #FFF;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <p class="container">
        <p class="demo">
            <p>2018世界杯已开幕：10天</p>
        </p>
    </p>
</body>
</html>

로그인 후 복사

설정 방법을 사용합니다. 효과는 다음과 같습니다.

배경은 투명하고 글자는 불투명.png

이렇게 설정하고 나면 글자가 훨씬 선명해 보입니다.

요약

사실 이 요구 사항을 충족하려면 이것이 유일한 생각 방법은 아닙니다. 두 개의 p를 동일한 위치에 사용할 수도 있습니다. 하나는 반투명 배경 p이고, 다른 하나는 텍스트 p입니다. 문제를 해결하려면 절대 위치 지정 또는 음수 여백을 작성하고 p를 빈 내용으로 표시해야 합니다. 이 방법은 다음 예와 같이 일부 시나리오에서 약간 복잡합니다. 실제 수요 시나리오에서는 여전히 특정 문제를 자세히 분석해야 합니다.