CSS是一種樣式語言,可以通過它來控制頁面中的元素的顯示效果。在頁面中,我們可能需要添加一些圖層,來使頁面的呈現(xiàn)效果更加豐富多彩。下面介紹一下在CSS中怎樣添加圖層。
/*首先,我們需要定義一個圖層,也就是一個帶有一定透明度的DIV塊*/
#layer{
position:absolute;/*定義為絕對定位*/
top:0;left:0;/*坐標(biāo)為0,0*/
width:100%;height:100%;/*寬度和高度為100%*/
z-index:1;/*設(shè)置層級為1*/
background-color:#FFFFFF;/*背景色為白色*/
opacity:0.8;/*透明度為0.8*/
filter:alpha(opacity=80);/*IE兼容性處理*/
}
/*然后,在該DIV塊的內(nèi)部添加要顯示的內(nèi)容*/
#layer p{
font-size:16px;/*字體大小為16px*/
color:#000000;/*字體顏色為黑色*/
text-align:center;/*居中對齊*/
padding-top:50px;/*上邊距為50px*/
}
上面的代碼中,首先我們定義了一個ID為“l(fā)ayer”的DIV塊,將其設(shè)置為絕對定位,并設(shè)置寬高為100%。然后我們設(shè)置了該DIV塊的透明度和背景色。在該DIV塊內(nèi)部,我們通過“#layer p”的方式,對其中的段落進行樣式設(shè)置,定義了字體大小,字體顏色等等。這樣,我們就可以通過這個圖層將要顯示的內(nèi)容加到頁面中。
需要注意的是,在CSS中,最后一個添加的元素會處于最上層,因此,如果我們需要添加多個圖層,需要設(shè)置它們的層級,使它們按照我們需要的順序顯示。z-index屬性就是用來設(shè)置層級的。
因此,在CSS中添加圖層,主要思路就是通過DIV塊設(shè)置背景色和透明度,并設(shè)置坐標(biāo)、寬高、層級等屬性,然后通過該DIV塊的內(nèi)部添加元素來顯示我們需要的內(nèi)容。