CSS實現父元素半透明,子元素不透明。 很久以來大家都習慣使用opacity:0.5在新式瀏覽器里實現半透明,而對IE較舊的版本使用filter:Alpha(opacity=0.5)的濾鏡來實現半透明。但是這樣實現的半透明有個問題,那就是這個屬性會被子元素所繼承。 如下代碼,則子元素中也將是 ...
在給nav 的屬性賦值opacity: . 透明度時會導致nav內子元素會繼承opacity屬性。此時再對子元素賦值opacity: . 時會導致 子元素實際opacity值為 . . . 。 此情況可通過 一行代碼完美解決:初始化nav時 加入 .navbar transparent 例: lt nav class navbar navbar fixed top navbar transpare ...
2017-11-26 10:11 2 6640 推薦指數:
CSS實現父元素半透明,子元素不透明。 很久以來大家都習慣使用opacity:0.5在新式瀏覽器里實現半透明,而對IE較舊的版本使用filter:Alpha(opacity=0.5)的濾鏡來實現半透明。但是這樣實現的半透明有個問題,那就是這個屬性會被子元素所繼承。 如下代碼,則子元素中也將是 ...
之前做了個半透明彈層,但設置背景半透明時,子元素包含的字體及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這里做一些總結,方便以后使用。 背景透明,文字不透明的解決方法: 為元素添加一個絕對定位的子元素,設置大小和該元素一樣 ...
在我們設計制作一些網頁的時候可能會用到半透明的效果,首先我們可能會想到用PNG圖片處理,當然這是一個不錯的辦法,唯一的兼容性問題就是ie6 下的BUG,但這也不困難,加上一段js處理就行了。但假如我們需要一個半透明遮罩的彈出層,如登陸框、注冊框、提示等,這時可能需要整個頁面都要被半透 明的遮罩層 ...
實現透明的css方法通常有以下3種方式,以下是不透明度都為80%的寫法 css3的opacity:x,x 的取值從 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值從 0 到 1,如rgba ...
最近遇到一個需求,要在圖片上顯示帶有半透明背景的文字,效果如下圖所示: 看到這個需求之后,第一反應是使用CSS3中的opacity設置元素的透明度。 效果如下: 這樣貌似也滿足了需求,不過並不完美,設置opacity之后,整個元素都半透明了,造成文字顯得模糊,這樣的解決方式並不 ...
對視圖直接設置alpha屬性的值會導致其子控件也變得半透明,而通常我們的需求是:背景半透明而其子控件不透明。 一、 ImageView設置一張透明的圖片。 二、使用colorWithWhite:alpha:方法 這是使用比較多的方法,white后面的參數表示灰度,從0-1之間 ...
設置元素的透明度: -moz-opacity:0.8; /*在Firefox中設置元素透明度 filter: alpha(opacity=80); /*ie使用濾鏡設置透明 但是當我們對一個標簽設置背景的透明度時,往往我們並不希望該標簽上的文字圖片也變成 ...
最近項目里需要實現這么個功能,類似網游中的聊天框,背景都是透明的,但是文字是不透明。所以如果簡單的使用opacity(非IE)和alpha濾鏡(IE)是無法實現這個效果的,會造成全部透明。 解決辦法如下: 1.實現完全透明: 設置background為transparent即可,兩個 ...