|
導讀網(wǎng)頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網(wǎng)關接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎,也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網(wǎng)關接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎,也就是說萬維網(wǎng)是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在頁面布局時,為了給用戶不一樣的視覺效果,需要設置div的背景顏色為半透明狀態(tài),你知道怎么設置嗎?接下來,就和大家聊聊如何用兩種方式使div的背景顏色變成半透明,以及兩種方式的優(yōu)劣。感興趣的朋友可以過來看看,希望對你有所幫助。首先,我們用大家比較熟悉的CSS屬性opacity來改變div的背景顏色。 描述:外面大的div背景顏色為黃色,里面小的div的背景顏色為紅色,現(xiàn)在我們需要設置大的div的背景顏色變成半透明狀態(tài),我們將opacity的屬性值設為0.5,代碼如下: HTML部分: <div class="aa">
<div class="bb">我是內容</div>
</div>CSS部分: .aa{
width: 250px;
height: 250px;
background: yellow;
opacity: 0.5;
}
.bb{
width: 150px;
height: 150px;
background: red;
}效果圖:
如圖所示,背景顏色的確變成了半透明,但是里面小div的背景以及文字都變成半透明了,這可能不是我們想要的效果,所以我們一般不使用這種方法。當然了,如果在頁面布局時,你希望div里面所有的都變透明,就用opacity。接下來我們用另一種方法,background-color:rgba(0,0,0,0~1),使用這個方法就只會設置div背景透明,而不會影響到div里的內容。 HTM部分一樣,只需要將opacity換成rgba即可。代碼如下: .aa{
width: 250px;
height: 250px;
background-color: rgba(255,255,0,0.5);
}
.bb{
width: 150px;
height: 150px;
background: red;
}效果圖:
看圖一目了然,大的div透明度改變以后,對里面的背景和文字都沒有任何影響。所以我們一般用background-color:rgba(0,0,0,0~1)來設置背景顏色透明。 以上介紹了兩種方式改變div背景顏色的透明度,他們各有優(yōu)劣,具體用什么方法,還要根據(jù)需要,找到最適合的方法,初學者可以多去練習,加深理解,希望對你有幫助。 以上就是css實現(xiàn)背景顏色半透明的兩種方法的詳細內容,更多請關注php中文網(wǎng)其它相關文章! 網(wǎng)站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!