溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用CSS3怎么實(shí)現(xiàn)背景透明文字不透明

發(fā)布時(shí)間：2021-05-14 16:48:19 來(lái)源：億速云 閱讀：131 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章為大家展示了使用CSS3怎么實(shí)現(xiàn)背景透明文字不透明，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

<!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('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 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>
    <div class="container">
        <div class="demo">
            <p>2018世界杯已開(kāi)幕：10天</p>
        </div>
    </div>
</body>

</html>

效果如下：

使用CSS3怎么實(shí)現(xiàn)背景透明文字不透明

背景透明，文字也透明.png

這樣貌似也滿足了需求，不過(guò)并不完美，設(shè)置opacity之后，整個(gè)元素都半透明了，造成文字顯得模糊，這樣的解決方式并不可取。

其實(shí)實(shí)現(xiàn)透明的CSS方法并不只有設(shè)置opacity一種方式。還有另外兩種：

  • css3的rgba(red, green, blue, alpha)，alpha的取值從 0 到 1，如rgba(255,255,255,0.8)

  • IE專(zhuān)屬濾鏡 filter:Alpha(opacity=x)，x 的取值從 0 到 100，如filter:Alpha(opacity=80)

在這里我采用了設(shè)置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('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 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>
    <div class="container">
        <div class="demo">
            <p>2018世界杯已開(kāi)幕：10天</p>
        </div>
    </div>
</body>
</html>

上述內(nèi)容就是使用CSS3怎么實(shí)現(xiàn)背景透明文字不透明，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手