㈠ css閫忔槑搴︼紝css鍥劇墖閫忔槑搴﹁劇疆鏂規硶
鍦ㄤ竴浜涚綉絝欑殑鐧誨綍欏甸潰涓婏紝緇忓父鍙浠ュ彂鐜幫紝涓寮犲浘鐗囧彔鍔犲湪鍙︿竴寮犲浘鐗囦笂錛屽簳灞傜殑鍥劇墖鑻ラ殣鑻ョ幇錛屽埄鐢╟ss涓鐨勯忔槑灞炴opacity鍙浠ュ疄鐜拌繖縐嶆晥鏋滐紝涓嬮潰灝辯畝鍗曚粙緇嶄竴涓嬫庝箞鍐欎唬鐮
1銆佹柊寤轟竴涓狧TML鏂囦歡錛屼笅杞戒袱寮犲浘鐗囷紝濡備笅鍥撅紝鏀懼湪涓涓鏂囦歡澶逛腑錛岄伩鍏嶅嚭鐜拌礬寰勯棶棰
2銆佷唬鐮佺ず渚嬪備笅錛屼富瑕佸埄鐢╟ss浼鍏冪礌::before錛孎_box涓哄墠緗灞傦紝嫻浜庤儗鏅涓婃柟
3銆佷笅闈㈢畝鍗曞垎瑙ｄ笅浠ｇ爜錛屽垎涓1錛2錛3錛岀涓閮ㄥ垎錛岃劇疆鑳屾櫙鍥劇墖001.jpg錛涚涓夐儴鍒嗭紝鍥哄畾鍓嶇疆灞傚浘鐗002.jpg鐨勪綅緗錛涚浜岄儴鍒嗭紝鍒╃敤浼鍏冪礌錛氾細before錛岃劇疆灞炴opacity鏉ヨ皟鑺傞忔槑搴︼紝鍙栧間負0-1錛0鏄鍏ㄩ忔槑錛屽嵆鐪嬩笉瑙佺殑鏁堟灉錛1鏄鍏ㄤ笉閫忔槑
4銆佷唬鐮佺ず渚嬩腑錛岃劇疆opacity涓0.5錛屽崐閫忔槑鐘舵侊紝瀹為檯欏甸潰鏁堟灉濡備笅
㈡ 在圖片上加有半透明黑色背景條的文字（如圖），css代碼怎麼寫，求助
這個可以用RGBA來實現的
如：
background-color: rgba(0,0,0,0.5);
完整代碼：
<span style="position:absolute; bottom:-5px; left:0; line-height:1.5; width:260px; background-color:rgba(0,0,0,0.5);">文字文字文字文字</span>
代需要注意的，RGBA是IE6不支持的！
㈢ css里怎麼給背景圖片變透明點 給圖片的div加什麼代碼才能實現呢
1、新建html文檔，在body標簽中添加一個img標簽，這時默認情況下圖片是不透明的：
㈣ CSS 鍥劇墖鍗婇忔槑,鏂囧瓧涓嶉忔槑鏄劇ず
<html>
<head><title>鍥劇墖錛岄忔槑灞傦紝鏂囧瓧</title>
<style>
#box1{
float:left;/*嫻鍔ㄥ畾浣嶅拰鐩稿瑰畾浣嶉兘鍙浠ワ紝鎴戣繖閲岀敤鐨勬槸嫻鍔ㄥ畾浣嶃*/
width:20%;
height:15em;
margin-left:3%;
margin-top:3%;
}
#box2{
float:left;/*嫻鍔ㄥ畾浣嶅拰鐩稿瑰畾浣嶉兘鍙浠ワ紝鎴戣繖閲岀敤鐨勬槸嫻鍔ㄥ畾浣嶃*/
width:100%;
height:100%;
border:1px solid black;/*緇欏浘鐗囧仛涓杈規*/
overflow:hidden;/*涓嶅噯婧㈠嚭鏉ワ紝鍋氬姩鐢繪晥鏋滅殑鏃跺欏彲鑳戒細婧㈠嚭鏉ワ紝婧㈠嚭鏉ョ殑閮ㄥ垎闅愯棌璧鋒潵銆*/
}
#picimg{
float:left;/*嫻鍔ㄥ畾浣嶅拰鐩稿瑰畾浣嶉兘鍙浠ワ紝鎴戣繖閲岀敤鐨勬槸嫻鍔ㄥ畾浣嶃*/
width:100%;
height:100%;
}
#touming{
position:relative;/*榪欎釜閫忔槑灞傚敖閲忕敤鐩稿瑰畾浣嶏紝榪欐牱涓嶄細璺戞潵璺戝幓錛屽師鍥犵洰鍓嶈繕涓嶆庝箞娓呮氾紝鍙嶆ｇ浉瀵篔k*/
clear:both;/*娓呴櫎嫻鍔ㄦ晥鏋滐紝閬垮厤鍒版椂鍊欏埌澶勪貢璺戱紝姣斿傚仛浜嗚繃娓″姩鐢葷殑鏃跺欍*/
width:100%;
height:1.5em;
top:-13.5em;
background:gray;
filter:alpha(Opacity=30);/*璁劇疆閫忔槑鏁堟灉30*/
-moz-opacity:0.3;/*璁劇疆閫忔槑鏁堟灉0.3*/
opacity: 0.3;/*璁劇疆閫忔槑鏁堟灉0.3*/
left:0;/*璺濈籦ox1璺濈繪槸0錛屽疄闄呬笂璺濈籦ox2鐨勮窛紱諱篃鏄0*/
}
#words{
position:relative;/*榪欓噷鐢ㄧ浉瀵瑰畾浣*/
clear:both;/*娓呴櫎嫻鍔錛岃繖涓寰堟湁蹇呰侊紝涓嶆竻闄ゆ誕鍔ㄤ細鍒板勪貢璺戠殑銆*/
width:100%;/*鐩稿逛簬box1鐨勫藉害錛屽疄闄呬笂涔熺瓑浜巄ox2鐨勫藉害*/
height:2em;
color:red;/*璁劇疆鏂囧瓧棰滆壊涓虹孩鑹詫紝浣犺嚜宸卞枩嬈浠涔堥滆壊灝卞紕浠涔堥滆壊錛屾垜姣旇緝鍠滄㈢孩鑹層*/
top:-15em;/璁劇疆鎴愯礋鐨勶紝鎶婃枃瀛楁彁鍒癰ox2涓婇潰鍘/
left:0;/*鐩稿逛簬box1,宸﹁竟璺濈昏劇疆鎴0*/
text-align:center;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<img id="picimg" src="https://www..com/img/bd_logo1.png">
</div>
<div id="touming"></div>
<div id="words">榪欓噷鏄瑕佹樉紺虹殑鏂囧瓧</div>
</div>
</body>
</html>
鏁堟灉鍥撅細
鏁堟灉榪樹笉閿欙紝閫忔槑灞傛湁閫忔槑鏁堟灉錛屾枃瀛楀彲浠ユｅ父鏄劇ず鍑烘潵銆傝繖涓鏂規硶榪樿屽惂錛屽搱鍝堛傛垜榪樹細鐢ㄤ笁涓猟iv鐢諱竴涓蹇冨艦錛屽ソ鐪嬪緱寰堝摕錛侊紒@
㈤ 鐧懼害絀洪棿鎬庢牱璁劇疆CSS鍙浠ヨ╁垎綾繪爮閫忔槑,涓嶈借鐪嬭儗鏅鐢婚潰鍟
鈼嗙┖闂磋儗鏅鍗婇忔槑
鍦–SS涓鏈変竴涓獮lpha婊ら暅錛岃繖涓婊ら暅鍙浠ヨ劇疆鐩鏍囧厓緔犵殑閫忔槑搴︺傝繕鍙浠ラ氳繃鎸囧畾鍧愭爣錛屼粠鑰屽疄鐜板悇縐嶄笉鍚岃寖鍥寸殑閫忔槑搴︺傚叿浣撹娉曞備笅錛
{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
鍏蜂綋鍙傛暟鍚涔夊備笅錛
opacity 閫忔槑搴︺傞粯璁ょ殑鑼冨洿鏄浠0 鍒 100錛屼粬浠鍏跺疄鏄鐧懼垎姣旂殑褰㈠紡銆備篃灝辨槸璇達紝0浠ｈ〃瀹屽叏閫忔槑錛100浠ｈ〃瀹屽叏涓嶉忔槑銆
finishopacity 鏄涓涓鍙閫夊弬鏁幫紝濡傛灉鎯寵佽劇疆娓愬彉鐨勯忔槑鏁堟灉錛屽氨鍙浠ヤ嬌鐢ㄤ粬浠鏉ユ寚瀹氱粨鏉熸椂鐨勯忔槑搴︺傝寖鍥翠篃鏄0 鍒 100銆
浠ヤ笂鐨勫弬鏁板彲浠ラ夌敤錛屽彲浠ュ彧璁劇疆涓涓猳pacity
渚嬪傦細
{filter:alpha(opacity=50)}
榪欎釜灝辨槸鍗婇忔槑鐨勮劇疆錛屽彧瑕佹妸{}涓鐨勪唬鐮佸姞鍏ュ埌闇瑕佽劇疆鐨勬ā鐗堜腑鐨剓}鐨勫嵆鍙錛岃板緱涓庡墠闈㈢殑浠ｇ爜涔嬮棿瑕佺敤";"闂撮殧錛屼笉鐒惰劇疆鏄鏃犳晥鐨
渚嬪傦細
鎴戣佽劇疆妯＄増鍖哄煙鑳屾櫙鐨勯滆壊錛堢櫧鑹詫級+鍗婇忔槑[灝辨槸鎴戠幇鍦╞log鐨勬晥鏋淽
鍙瑕佸湪
.modbox{}
.modbl{}
.modbc{}
.modbr{}
涓閮借劇疆background-color:white
榪欎簺灝辨槸妯＄増鑳屾櫙璁劇疆鐨処D
鐒跺悗鍐嶅湪.modbox,.modbl,.modbc,.modbr{}
涓鍔犲叆filter : alpha(opacity=80)灝卞彲浠ヨ揪鍒版墍鏈夋ā鐗堢殑鑳屾櫙閮芥槸鍗婇忔槑鐨勬晥鏋滀簡
濡傛灉甯屾湜鍍忔垜榪欐牱鍙鏄劇ずblog鐨勮儗鏅錛屽埆鐨勯兘鍏ㄩ忔槑鐨勮瘽錛岄偅涔堝氨鍦ㄥ埆鐨勬ā鐗堜腑鍔犲叆鑳屾櫙鍏ㄩ忔槑鐨勪唬鐮佸嵆鍙
background:transparent 榪欏氨鏄鑳屾櫙鍏ㄩ忔槑鐨勪唬鐮
鍚勬ā鐗圛D璇峰弬鐓ч摼鎺ワ細鐧懼害絀洪棿CSS璇存槑
涓嶈繃榪欐牱鐨勮瘽錛岀浉鍏蟲ā鐗堢殑涓昏佸尯鍩熸槸閫忔槑浜嗭紝鍙鏄搴曚笅榪樹細鏈変竴鏉￠滆壊鐣欑潃鐨勶紝鎵浠ュ彟澶栬繕瑕佸湪
.modbl{}
.modbc{}
.modbr{}
涓涔熷姞鍏ヨ儗鏅鍏ㄩ忔槑鐨勪唬鐮侊紝榪欐牱鎵嶈兘璁╂ā鐗堝尯鍩熷畬鍏ㄩ忔槑錛屽氨鍍忔垜鐜板湪鐨勬晥鏋滀竴鏍
鍙﹀栬繖涓鍙傛暟鐩鍓嶅彧鑳界敤浜庤儗鏅鑹茬殑璁劇疆錛岃儗鏅鍥劇墖鏃犳硶璁劇疆涓哄崐閫忔槑
濡傛灉涓嶆兂璁劇疆鍏ㄩ忔槑鐨勮瘽錛屽彲浠ユ妸.modbl{}.modbc{}.modbr{}涓変釜涓鐨刡ackground:transparent鏀規垚.modbox{}涓鐨刡ackground-color:#FFFFFF錛屽綋鐒惰繖閲岀殑#FFFFFF浣犲彲浠ユ崲鎴愯嚜宸卞枩嬈㈢殑棰滆壊錛屼笉榪囦負浜嗙編瑙傜粺涓錛屽緩璁榪4涓鐨勯滆壊浠ｇ爜鏈濂借劇疆涓轟竴鏍風殑
闄勶細#FFFFFF灝辨槸white錛岀櫧鑹詫紱#000000灝辨槸black錛岄粦鑹
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF}
modbl{background-color:#FFFFFF;border-left:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
.modbc{background-color:#FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
.modbr{background-color:#FFFFFF;border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
惟鎴戠殑灝忓眿:http://hi..com/823xu
嬈㈣繋鏉ュ仛瀹錛
㈥ 背景圖片的透明度如何設置（CSS）
可以設置啊，如圖：
常見的失敗做法
最常見的做法事設置元素的opacity,這種設置出來的效果就是內容與背景都事半透明的，嚴重影響視覺效果。
還有就是設置background-color:rgba(),這種方式只能設置背景顏色的透明度。
正確Action:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登陸</title><style type="text/css">body{background-image:url(images/bird.jpg);background-repeat: no-repeat;background-size:100%;}.login_box::before{content:"";/*-webkit-filter: opacity(50%);filter: opacity(50%); */background-image:url(images/love.jpg);opacity:0.5;//透明度設置z-index:-1;background-size:500px 300px;width:500px;height:300px;position:absolute;//一定要設置position:absolute,這樣才能設置z-index，讓背景處於內容的下一層top:0px;left:0px;border-radius:40px;}.login_box{position:fixed;left:50%;top:200px;width:500px;height:300px;margin-left:-250px;border-radius:40px;box-shadow: 10px 10px 5px #888;border:1px solid #666;text-align:center;}form{display:inline-block;margin-top:100px;}input{display:block;width:250px;height:30px;background-color: #888;border:1px solid #fee;outline:none;border-radius:10px;}input[type="submit"]{width:100px;height:30x;margin-left: 70px;background-color: #ccc;}span{color:red;font-size:15px;}</style></head><body><div class="login_box"> ... ...