㈠ 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"> ... ...