css前景色
Ⅰ 1、在CSS樣式表中,如何將div的前景色設置為紅色
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
div{
background:red;
height:30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
請採納
Ⅱ CSS中如何做到前景色透明並且能看到背景色的圖片影子，看圖
半透明的png格式做背景圖，缺點是多引入一個圖片資源，ie6下你還得再引入一個js來讓png半透明。
背景色設置為：RGBA顏色，如：background: rgba(100,100,100,.8);最後那個.8(0.8前面的0可以省略)就是透明度；優點是一句搞定，缺點是ie低版本根本不支持RGBA顏色。
Ⅲ HTML+CSS如何實現暗化網頁前景色
今天剛剛看到的。你把代碼保存預覽看是不是你要的效果。
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
//背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色） //背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色） //背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色） //背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色） //背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色） //背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色）
<input type="button" value="點擊這里" onclick="sAlert();" />
<script type="text/javascript" language="javascript">
function sAlert(){
var msgw,msgh,bordercolor;
msgw=250;//提示窗口的寬度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的邊框顏色
titlecolor="#99CCFF";//提示窗口的標題顏色
//背景層（大小與窗口有效區域相同，即當彈出對話框時，背景顯示為放射狀透明灰色）
var bgObj=document.createElement("div");//創建一個div對象（背景層）
//定義div屬性
bgObj.setAttribute("id","bgDiv");
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="15%";
bgObj.style.width="85%";
bgObj.style.height="100%";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);//在body內添加該div對象
var msgObj=document.createElement("div")//創建一個div對象（提示框層）
//定義div屬性，即相當於
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "65%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");//創建一個h4對象（提示框標題欄）
//定義h4的屬性，即相當於
//<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick=""> 關閉 </h4>
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.7";
title.style.border="1px solid " + bordercolor;
title.style.height="12px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="關閉";
title.onclick=removeObj;
function removeObj(){//點擊標題欄觸發的事件
document.body.removeChild(bgObj);//刪除背景層Div
document.getElementById("msgDiv").removeChild(title);//刪除提示框的標題欄
document.body.removeChild(msgObj);//刪除提示框層
}
document.body.appendChild(msgObj);//在body內添加提示框div對象msgObj
document.getElementById("msgDiv").appendChild(title);//在提示框div中添加標題欄對象title
var txt=document.createElement("p");//創建一個p對象（提示框提示信息）
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML='key:<input type="test" name="psd" /><br><input type ="button" value = "send" onclick= removeObj() ; >';
document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息對象txt
}
</script>
</body>
</html>
Ⅳ css中，如何設置前景色的透明度
1、准備好初始化的代碼
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
2、初始化樣式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、運行結果為
透明原理：把背景顏色設置為rgb的方式，然後再加一個透明度就可以設置為半透明了。
注意：設置背景顏色時哪裡應該寫成rgba。