CSS設定透明度與rgba顏色模式

來源:互聯網
上載者:User

之前我寫過一篇關於CSS透明度的文章,抱怨CSS對一個元素設定透明度後,導致它裡面的元素也跟著透明了。最近我發現,其實這樣挺好的。

有時候我們想要一個背景半透明文字不透明的效果,比如一個“資訊警告框”,但當我們給這個元素加上opacity屬性後,發現背景和他裡面的所有東西都半透明了,導致辨認困難。

如果你硬揪著opacity不放,你會發現用opacity來實現背景半透明文字不透明的效果很困難。於是,像我一樣,覺得W3C關於透明度的設定真是蛋疼。

其實,是我們理解錯了。

如果要背景半透明文字不透明這種效果,只要把background設定成rgba形式就可以了!如:

background:rgba(0,0,0,0.5);

相反,你要文字半透明而背景不管,就把color設定成rgba格式即可!

而在你需要此元素所有子項目都保持一個透明度是,才會用到opacity屬性:

opacity:0.5;

我們可以這樣想,如果你想要某地區裡所有元素都保持一個透明度,但CSS的opacity不能繼承的話,那你將會多麼蛋疼!你需要設定多少個元素的opacity呢?

附一:

所以,我覺得CSS現在的透明度設定挺好的我很贊成——不過,我怎麼又恨起IE來了呢?媽的,IE支援rgba的顏色格式嗎!

原文連結: http://www.jo2.org/archives/291.htm.

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.