回覆列表
-
1 # linux基礎學習
-
2 # 合肥隔壁科技
html/css讓背景顏色半透明完整程式碼
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border:1px red solid;
width:800px;
height:800px;
background-color:rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
你好，html中讓某個標籤背景顏色變為透明，一般有兩種方法。
一種是在css樣式中用opacity屬性來控制div的透明，這種方法會讓div中的所有內容都變為半透明的效果，如下所示的例子：
<html>
<head>
<meta charset="utf-8"/>
<style>
.aa{
width: 300px;
height: 300px;
background: red;
opacity: 0.5;
}
.bb{
width: 150px;
height: 150px;
margin:50px;
background: yellow;
}
</style>
</head>
<body>
<div>背景
<div>我是內容</div>
</div>
</body>
</html>
執行效果如下圖所示：
不管是文字還是背景都變成半透明的了。
第二種方法是，透過background-color或者background屬性，將顏色值設定為帶透明度的值：rgba(255,255,0,0.5)。 最後一個值即為設定透明度。如下例子所示：
<html>
<head>
<meta charset="utf-8"/>
<style>
.aa{
width: 300px;
height: 300px;
/*background: red; */
background-color: rgba(255,0,0,0.5)
/*opacity: 0.5;*/
}
.bb{
width: 150px;
height: 150px;
margin:50px;
background: yellow;
}
</style>
</head>
<body>
<div>背景
<div>我是內容</div>
</div>
</body>
</html>
執行效果如下所示：
只有背景被設定了不透明度。