2012-12-20 59 views
0

我正在爲客戶開發網站的最後階段,並且很難弄清楚如何防止小花圖片繼承其透明度父元素。無法強制繼承父項的透明度的小圖片

我第一次嘗試使圖像獨立,在CSS中使用絕對定位。這工作;但是,它根據瀏覽器窗口的大小和顯示器以及操作系統的大小引入了對齊問題。我能夠通過在瀏覽器選擇javascript中添加瀏覽器問題並添加必要的CSS代碼來檢查每個瀏覽器,但我仍然遇到了對齊問題,這取決於瀏覽器窗口的大小和監控熒幕。

要查看與獨立浮動(花的圖像)的頁面,請參閱以下網址:

mauisunsetb122.com/index5.html

然後我決定像拴在相鄰的文本,以便無論大小瀏覽器窗口或監視器,圖像將始終錨定到文本。這是透明度問題發生的地方。看到這樣的一個例子,請參閱以下網址:

mauisunsetb122.com/index5_8.html

我試着按照以下網址中發現的例子解決問題,但它沒有工作:

http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack

在此先感謝您的幫助!

+0

mauisunsetb122.com/index5_8.html鏈接不工作 – 2012-12-20 03:57:22

+0

對圖像應用'opacity:0.4' – 2012-12-20 03:59:44

+0

鏈接現在已修復。 – alpinehyker

回答

0

如果你想使背景透明,沒有子元素繼承了這點,你有幾種選擇:

  1. 使用小PNG與transarency作爲背景圖像。
  2. 使用rgba'background-color設置背景顏色:rgba(255,255,255,0.5);'
  3. 使用CSS可怕的黑客

Generaly 1似乎是最常用和支持。