首頁 >web前端 >css教學 >css如何實現背景透明,文字不透明?

css如何實現背景透明,文字不透明?

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-20 17:58:5412450瀏覽

在css中,可以使用rgba函數實現背景透明,文字不透明,只需給元素背景設定「rgba(數值,數值,數值,數值)」即可;其中透明度(A)取值0 ~1之間,代表透明度,數值為0時代表完全透明,數值為1時代表完全不透明。

css如何實現背景透明,文字不透明?

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

使用css3中的rgba:

r: red,取正整數或百分數;
g:green,取正整數或百分數;
b:blue,取正整數或百分數;
a:alpha,取0~1之間的數

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
}
.mydemo{
    padding: 25px;  
    background-color: red;
    background-color:rgba(255,0,0,0.5);
}
.mydemo p{
    color: black;
}
</style>
</head>
<body>    
    <div class="mydemo">
        <p>myIp</p>     
    </div>
</html>

css如何實現背景透明,文字不透明?

#推薦學習:css影片教學

#

以上是css如何實現背景透明,文字不透明?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn