通常以三種元素作為背景色:背景顏色、背景、背景顏色和背景混用
一、使用背景顏色
格式:backgroung-color:顏色值
設定塊的背景顏色,可以用通類選擇符樣式實現,即在css樣式中設定;也可直接在body中設定。
二、使用背景
1.預設屬性
格式:background-image:路徑
例:background-image: url("…/img/sprite.footer.png"); (此為相對路徑)
2.重複屬性
(1)格式:backgroung-repeat:屬性值
(2)屬性值如下:
repeat:設定背景按照從左到右、從上到下的順序顯示
no-repeat:設定背景不重複,在沒有定義位置時出現在容器左上角
repeat-x:設定背景橫向排列,在沒有定義位置時在容器頂部從左到右重複排列
repeat-y:設定背景縱向排列,在沒有定義位置時在容器左側從上到下重複排列
使用background-repeat時,背景在橫向和縱向被無限複製,鋪滿整個文件範圍。因此,需使用background-repeat:no-repeat,即設定背景以不重複的方式顯示。
3.使用位置屬性
(1)格式:background-position:屬性值
(2)屬性值如下:
長度值、百分比、top、bottom、left、right、center(設定背景橫向和縱向居中)
注:在使用background-position屬性時需要設定兩個屬性值
例1:background-position:left center;
即設定背景以水平局左、垂直居中的方式顯示。
例2:background-position:56% 43%;
使用百分比表示,需要注意,百分比值的指定是以左邊界和上邊界為參照物件的,其中的距離值是指背景的中心到兩個參照物件邊界的百分比。
4.使用附件屬性
(1)格式:background-attachment:屬性值
(2)屬性值如下:
scroll:設定背景圖隨內容滾動
fixed:設定背景固定不動
背景附件屬性的預設值是scroll,即背景隨頁面內容的滾動而上下滾動。
對於預設html樣式而言,一旦文件顯示範圍超過當前容器,瀏覽器就會提供滾動條以便瀏覽。而當使用者拖動滾動條瀏覽文字的時候,背景會隨著文字一起滾動,即預設的「scroll」。
若想讓背景永遠固定在下層,無論上層文字怎樣滾動,背景都靜止不動,就需要使用background-attachment屬性,新增「fixed」屬性值能滿足要求。
品類齊全,輕鬆購物
其中css樣式如下:
.bottom_logo>span
效果如下:
結論:在上述**中,通過樣式屬性設定了背景和背景顏色,程式執行後的效果是背景顏色被背景部分覆蓋。
.bottom_logo>span
使用CSS控制頁面
在對css簡介 上篇部落格 了解後,便希望使用css對頁面進行全方位的控制。本篇部落格主要介紹如何使用css控制頁面,以及其控制頁面的各種方法,包括行內樣式 內嵌式 鏈結式和匯入式。行內樣式是所有樣式方法中最為直接的一種,它直接對html的標記使用style屬性然後將css 直接寫在其中。如圖 其顯...
CSS控制頁面的方法
1.行內樣式 p style color ff000 font size 20px text decoration underline 正文內容1 p 2.內嵌樣式 style type text css p style 3.連線式css樣式 link href type text css rel ...
CSS 頁面美化和布局控制
2.好處 層疊 多個樣式可以作用在同乙個html的元素上,同時生效1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率1.內聯樣式 在標籤內使用style屬性指定css 如 hello css 2.內部樣式 在head標籤內,定義style標籤,style標籤...