css實現(xiàn)背景透明文字不透明

設(shè)置元素的透明度:

-moz-opacity:0.8; /*在Firefox中設(shè)置元素透明度

filter: alpha(opacity=80); /*ie使用濾鏡設(shè)置透明

但是當(dāng)我們對一個標(biāo)簽設(shè)置背景的透明度時,往往我們并不希望該標(biāo)簽上的文字圖片也變成半透明了叼风。

例如:

不透明

div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;

height:500px;color:#F30; font-size:32px; font-weight:bold; }

可以很明顯的看出文字也被半透明的昵慌,這是我們不想看到的效果。

以前我曾經(jīng)是絕對定位的方法解決這個問題梳毙,也就是現(xiàn)在的p并不是div的子元素。

不透明

這樣div的半透明效果也就不會影響到元素p了捐下。最后在將p定位到需要的位置账锹。

但是很多時候這樣的標(biāo)簽并不是很合理,有可能還會多浪費幾個標(biāo)簽坷襟。

下面的這種方法就可以解決上面的問題了:

div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現(xiàn)FF背景透明奸柬,文字不透明*/

background:#000; filter:Alpha(opacity=20);/*實現(xiàn)IE背景透明*/

width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}

div p{ position:relative;}/*實現(xiàn)IE文字不透明*/

火狐我們直接用rgba顏色就可以解決子標(biāo)簽跟著半透明的問題了,但是ie還不是能很好的支持婴程。

所以我們給不想被透明的標(biāo)簽設(shè)置一個定位屬性廓奕,問題接能解決了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末档叔,一起剝皮案震驚了整個濱河市桌粉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌衙四,老刑警劉巖铃肯,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異传蹈,居然都是意外死亡押逼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門惦界,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挑格,“玉大人,你說我怎么就攤上這事沾歪∑” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長显歧。 經(jīng)常有香客問我仪或,道長,這世上最難降的妖魔是什么士骤? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任范删,我火速辦了婚禮,結(jié)果婚禮上拷肌,老公的妹妹穿的比我還像新娘到旦。我一直安慰自己,他們只是感情好巨缘,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布添忘。 她就那樣靜靜地躺著,像睡著了一般若锁。 火紅的嫁衣襯著肌膚如雪搁骑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天又固,我揣著相機(jī)與錄音仲器,去河邊找鬼。 笑死仰冠,一個胖子當(dāng)著我的面吹牛乏冀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播洋只,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼辆沦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了识虚?” 一聲冷哼從身側(cè)響起肢扯,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舷礼,沒想到半個月后鹃彻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體郊闯,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡妻献,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了团赁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片育拨。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖欢摄,靈堂內(nèi)的尸體忽然破棺而出熬丧,到底是詐尸還是另有隱情,我是刑警寧澤怀挠,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布析蝴,位于F島的核電站害捕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏闷畸。R本人自食惡果不足惜尝盼,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望佑菩。 院中可真熱鬧盾沫,春花似錦、人聲如沸殿漠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绞幌。三九已至蕾哟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間莲蜘,已是汗流浹背渐苏。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留菇夸,地道東北人琼富。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像庄新,于是被迫代替她去往敵國和親鞠眉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案择诈? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評論 1 92
  • ?前端面試題匯總 一械蹋、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • 1羞芍、垂直對齊 如果你用CSS哗戈,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在荷科,利用CSS3的Transform唯咬,...
    kiddings閱讀 3,160評論 0 11
  • 題石: 濯發(fā)水云間 文/趙春苗 莫道幽思何所似,女兒濯發(fā)水...
    鳥人的羽毛閱讀 195評論 0 2
  • 一切都有一個開始! 有開始刻获,就有結(jié)束蜀涨!何時結(jié)束? 有生,即有死厚柳!有苦氧枣,就有樂!有歡笑别垮,就有痛苦挑胸!有開心,就有郁悶宰闰!...
    吳桂斌閱讀 254評論 0 2