css父元素透明度(opacity)對子元素的影響
首先子元素會繼承父元素的透明度:
- 設定父元素opacity:0.5,子元素不設定opacity,子元素會受到父元素opacity的影響,也會有0.5的透明度。
其次子元素的透明度是基於父元素的透明度計算的:
- 設定父元素opacity:0.5,即使設定子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基礎上設定的,因此子元素的opacity還是0.5。
解決辦法:
利用CSS3屬性rgba(即red+green+blue+alpha的顏色),
例如background-color:rgba(0,0,0,0.5)
但是IE7/8不支援此屬性,可按如下方法寫:
父元素div要寫如下:
background-color: rgba(0,0,0,0.5)!important;
background-color: #000;
filter:Alpha(opacity=50);
子元素div加個定位position:absolute/relative即可。
覺得有幫助的小夥伴右上角點個贊~
掃描上方二維碼關注我的訂閱號~
覺得有幫助的小夥伴點個
相關推薦
css父元素透明度(opacity)對子元素的影響
首先子元素會繼承父元素的透明度: 設定父元素opacity:0.5,子元素不設定opacity,子元素會受到父元素opacity的影響,也會有0.5的透明度。 其次子元素的透明度是基於父元素的透明度計算的: 設定父元素opacity:0.5,即使設定子元素opacity:1,子元素的opacity:1也
CSS基礎(二)--標籤元素及佈局模型
1、標籤元素分類 在CSS中,標籤元素一般分為3大不同的種類:塊狀元素、內聯元素以及內聯塊狀元素 常見的塊狀元素有:<div>、
(3)選擇元素——(4)css選擇器(CSS selectors)
The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, as outlined on the World Wide Web Con
《精彩絕倫的CSS》——選擇器(二)為“目標”元素新增樣式(:target)
二、為“目標”元素新增樣式(:target) 有時候我們希望指向文件中某一具體片段時,通常會使用到錨點(anchor)來實現,比如跳轉到某一頁面的id為LLL-target的元素: <a hre
如何用CSS快速佈局(一)—— 佈局元素詳細
要快速進行網頁排版佈局,則必須對佈局的元素有清晰的瞭解,才不會總是在細節處出錯。這一篇先詳解有關佈局的因素作為佈局基礎:塊級元素and內聯元素、盒模型、準確定位、元素對齊、樣式繼承。下一篇則重點描述快速佈局思路。 一、什麼是塊級元素和內聯元素 1,塊級元素: display
CSS躬行記(2)——偽類和偽元素
一、偽類選擇器 偽選擇器彌補了常規選擇器的不足,能夠實現一些特殊情況下的樣式,例如在滑鼠懸停時或只給字串中的第一個字元指定樣式。與類選擇器類似,可以從HTML元素的class屬性中檢視到,但偽選擇器不會出現在HTML文件中(有幾個例外,如:lang、::placeholder等)。並且它的關鍵字大小寫不敏
selenium測試(Java)--元素操作(五)
ear 獲取驗證碼 wid 輸入 static pri 元素 sta email 元素的操作有 1. 清除文本 2. 模擬按鍵輸入 3. 單擊元素 4. 返回元素尺寸 5. 獲取文本 6. 獲取屬性值 7. 判斷是否可見 8. 提交 下面通過操
Javascript基礎簡單匯總(一):元素獲取
問題 元素節點 all push 傳說 length [] nbsp 文檔 在頁面腳本中,如果要對頁面元素進行操作,那麽我們就要獲取到這個元素 那麽在獲取元素之前首先得要了解什麽是DOM(document object model) 在DOM,元素是以節點的形式表示的,每
css重構之旅(一)
rdquo lan set 變化 部分 網站 一個 寬度 lang css重構之旅 >前言: 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去,馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術,反而忽略了最基礎
selenium + python自動化測試unittest框架學習(三)webdriver元素定位(一)
倒數 節點 大於 文本框 webdriver 而且 單標簽 unit 遍歷 1.Webdriver原理 webdirver是一款web自動化操作工具,為瀏覽器提供統一的webdriver接口,由client也就是我們的測試腳本提交請求,remote server瀏覽器進行響
HTML&CSS常見問題整理(五)
www. mark js文件 邊距 自適應 白帽優化 位置 agen 移動設備 81.在HTML中,SEO常見的白帽優化技巧有哪些? 82.塊屬性標簽與行屬性標簽的區別?哪些標簽是塊屬性的,哪些是行的 見我的博客:http://www.cnblogs.com/shireyh
Spring-Boot整合freemarker引入靜態資源css、js等(轉)
mark pan 創建 line path main 實現 content -m 一、概述springboot 默認靜態資源訪問的路徑為:/static 或 /public 或 /resources 或 /META-INF/resources 這樣的地址都必須定義在src/
Python+Selenium筆記(十):元素等待機制
tor 好的 菜單 自己 定時 場景 ive add nal (一) 前言 突然的資源受限或網絡延遲,可能導致找不到目標元素,這時測試報告會顯示測試失敗。這時需要一種延時機制,來使腳本的運行速度與程序的響應速度相匹配,WebDriver為這種情況提供了隱式等待和顯式等待兩
CSS兼容處理(二)
bsp test -h lock 現在 -s play AC orm 在IE6及以下版本的瀏覽器中定義小高度: 解決方法:#text { overflow:hidden; height:1px; font-size:0; line-height:0;} 具體詳解:IE6
CSS(CSS3)選擇器(1)
cti str 插入 link 規則 padding 不可 情況 可能 這篇文章主要用於存儲CSS以及CSS3的選擇器部分知識,以便日後查閱及記憶. 該內容分為兩部分,第一部分為css選擇器的一些基本知識。第二部分為CSS3新增加的選擇器。 在開始之前,先簡單介紹一下選擇器
CSS(CSS3)選擇器(2)
for 字符 tutorials pty disable post input purple enabled 該部分主要為CSS3新增的選擇器 接上一篇 CSS(CSS3)選擇器(1) 一.通用兄弟選擇器: 24:E ~
LAMP(6)靜態元素過期時間、配置防盜鏈、訪問控制Directory、訪問控制FilesMatch
訪問控制 靜態元素過期時間靜態元素:(圖片、js、css)平時我們在瀏覽器訪問網站的時候,如果裏面有這些靜態元素,瀏覽器會幫我們把它們緩存下來,再次訪問的時候訪問的速度就會快。緩存下來的靜態元素到底緩存多久?這個是可以在服務器配置文件中定義的。(定義靜
selenium元素定位(三)
瀏覽器 war art style link 問題 cond val 最大 使用selenium就不可避免的要提到界面元素定位,通過元素定位來實現一系列的邏輯操作。 selenium提供了8中元素定位的方式: id、name、class name、tag n
python 子類繼承父類__init__(轉載)
elf lpad pla 最好 就是 main 代碼 borde wid 轉載: http://www.jb51.net/article/100195.htm 前言 使用Python寫過面向對象的代碼的同學,可能對 __init__ 方法已經非常熟悉了,__init__
TestNG(五)常用元素的操作
新聞 輸入框 package ava 最好 div https set 標簽 原則先定位元素,然後對元素進行操作。 一、點擊操作 //用name方法查找元素WebElement keyfind = driver.findElement(By.name("tj_trnews"