css如何實現(xiàn)文字不透明背景半透明效果

這篇文章主要講解了“css如何實現(xiàn)文字不透明背景半透明效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css如何實現(xiàn)文字不透明背景半透明效果”吧！

創(chuàng)新互聯(lián)專注于網站建設|成都網站維護公司|優(yōu)化|托管以及網絡推廣，積累了大量的網站設計與制作經驗，為許多企業(yè)提供了網站定制設計服務，案例作品覆蓋水電改造等行業(yè)。能根據企業(yè)所處的行業(yè)與銷售的產品，結合品牌形象的塑造，量身建設品質網站。

方法：1、用width和height屬性將文字元素的大小設置與父元素一樣；2、用background屬性和rgba()函數(shù)實現(xiàn)文字不透明背景半透明效果，語法“文字元素{background:rgba(255,255,255,透明值);}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css怎樣實現(xiàn)文字不透明背景半透明效果

在css中可以利用position屬性，將其設置為absolute位文字元素生成絕對定位，相對于 static 定位以外的第一個父元素進行定位。使其相對于圖片元素絕對定位。

再利用background屬性和rgba()函數(shù)來設置背景圖片的透明度。

下面我們通過示例來看一下怎樣設置文字不透明背景半透明效果，示例如下：

<!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>Document</title>
  <style type="text/css">
.demo2-bg{
    background: url(1118.02.png);
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    width: 500px;
    height: 300px;
    background:rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div class="demo2-bg">
    <div class="demo2">背景圖半透明，文字不透明</div>
</div>
</body>
</html>

輸出結果：

css如何實現(xiàn)文字不透明背景半透明效果

感謝各位的閱讀，以上就是“css如何實現(xiàn)文字不透明背景半透明效果”的內容了，經過本文的學習后，相信大家對css如何實現(xiàn)文字不透明背景半透明效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

文章標題：css如何實現(xiàn)文字不透明背景半透明效果
標題網址：http://muchs.cn/article16/jcpjgg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供定制網站、Google、網站設計公司、網站內鏈、網頁設計公司、服務器托管

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容