碼上歡樂
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
Css:背景色透明，內容不透明之終極方法！兼容所有瀏覽器
本文轉載自
查看原文
2012-08-31 19:41
7849
CSS
沒有過多的文字，直接看效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Css:背景色透明，內容不透明之終極方法！兼容所有瀏覽器</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#3f3f3f;font-family:"宋體", Arial;} h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;} img{border:none 0;} #bos{width:820px;background:#fff;margin:0 auto;} #bos ul{zoom:1;overflow:hidden;background:#fff;padding:5px 0 5px 5px;} #bos ul li{width:260px;position:relative;overflow:hidden;float:left;margin:5px;background:#fff;} .img_wrap{width:258px;border:1px solid #ccc;border-radius:15px;display:block;overflow:hidden;} #bos ul li h2{width:100%;height:0px;line-height:50px;color:#fff;text-indent:1em;font-size:14px;font-family:微軟雅黑;position:absolute;bottom:0px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#44000000',endColorstr='#44000000');background:rgba(0,0,0,.6);} </style> </head> <body> <div id="bos"> <ul> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>網站防詐騙重要提示 購物滿59元免運費</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/r1_120824.jpg" alt="" /></a> <h2>Android客戶端升級新體驗 配送延誤通知</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/f8_120824.jpg" alt="" /></a> <h2>陳年談品牌的本分 工行e支付可直減60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>陳年談品牌的本分 工行e支付可直減60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/f8_120824.jpg" alt="" /></a> <h2>陳年談品牌的本分 工行e支付可直減60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>陳年談品牌的本分 工行e支付可直減60元</h2> </li> </ul> </div> </body> </html>
運行代碼
×
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
【原】CSS實現背景透明，文字不透明，兼容所有瀏覽器
CSS實現背景透明，文字不透明，兼容所有瀏覽器
CSS實現背景透明，文字不透明，兼容所有瀏覽器
設置css樣式背景色透明 字體顏色的不透明 設置select 箭頭樣式
CSS設置背景色透明 字體不透明
css 實現層半透明，且塊內文字不透明（兼容ie6等各種瀏覽器）
CSS-透明背景色兼容
css 背景透明文字(內容)不透明三種實現方法
兼容IE、Firefox的背景半透明內容不透明設置
純css實現背景圖片半透明內容不透明的方法-opacity屬性正確使用
粵ICP備18138465號
© 2018-2025 CODEPRJ.COM
