首頁 > web前端 > css教學 > CSS字體透明度怎麼設定?

CSS字體透明度怎麼設定?

不言
發布: 2018-10-30 15:27:36
原創
30073 人瀏覽過

在css中有很多好看的樣式都可以實現,css設定出來的樣式讓整個網頁看起來也會非常美觀,今天的這篇文章就給大家來介紹一下在css中怎麼設定字體的透明度,讓你的字體在網頁中看起來是透明的。

在css3新增了一個rgba屬性,所謂rgba屬性,就是R(紅)G(綠)B(藍色)三原色加ALPHA(透明度),下面我們就來具體看看這個rgba屬性如何設定字體透明度。

首先利用RGBA來設定背景顏色透明度是非常簡單的,我們來簡單看一個例子:(相關推薦:css如何設定背景顏色透明?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
.div{
    background-color:rgba(220,38,38,0.2);
    width:100px;
    height:100px;
}
</style>
</head>
<body>
<div class="div">
    我是文字
</div>
</body>
</html>
登入後複製

RGBA來設定背景顏色透明度的效果如下:

CSS字體透明度怎麼設定?

#上述程式碼是不是很簡單,那麼如果將字體設定透明度我們可以如何利用RGBA呢?

其實也非常簡單,設定字體的透明度,我們可以對color的rgba屬性進行設定。

我們來看看RGBA設定字體透明度的具體範例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
.div{
    background:red;
    width:100px;
    height:100px;
    color:rgba(255,255,255,0.4)
}
    </style>
</head>
<body>
<div class="div">
    我是透明文字
</div>
</body>
</html>
登入後複製

字體透明度的效果如下:

CSS字體透明度怎麼設定?

這篇文章到這裡就全部結束了,關於css中透明度設定的相關內容大家可以去php中文網的css影片教學css3影片教學欄位學習。

以上是CSS字體透明度怎麼設定?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板