CSS 可以添加背景顔色和背景圖片,以及來進行圖片設置。
背景圖片(image)
語法:
background-image : none | url (url)
參數:
none : 無背景圖(默認的)
url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中(隻有CSS3才可以多背景)可以和 background-color 連用。 如果圖片不重複地話,圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顔色。
小技巧: 我們提倡 背景圖片後面的地址,url不要加引号。
背景平鋪(repeat)
語法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數:
repeat : 背景圖像在縱向和橫向上平鋪(默認的)
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景圖像在橫向上平鋪
設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
背景位置(position)
語法:
background-position : length || length background-position : position || position
參數:
length : 百分數 | 由浮點數字和單位标識符組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明:
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為:(0% 0%)。
如果隻指定了一個值,該值将用于橫坐标。縱坐标将默認為50%。第二個值将用于縱坐标。
注意:
實際工作用的最多的,就是背景圖片居中對齊了。
背景附着
語法:
background-attachment : scroll | fixed
參數:
scroll : 背景圖像是随對象内容滾動
fixed : 背景圖像固定
說明:
設置或檢索背景圖像是随對象内容滾動還是固定的。
背景簡寫
background屬性的值的書寫順序官方并沒有強制标準的。為了可讀性,建議大家如下寫:
background:背景顔色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最後一個參數是alpha 透明度 取值範圍 0~1之間
注意: 背景半透明是指盒子背景半透明, 盒子裡面的内容不收影響。
導航欄案例
使用技巧:在一行内的盒子内,我們設定行高等于盒子的高度,就可以使文字垂直居中。
<head> <meta charset="utf-8"> <style> body { background-color: #000; } a { width: 200px; height: 50px; /* background-color: orange; */ display: inline-block; /* 把a 行内元素轉換為行内塊元素 */ text-align: center; /* 文字水平居中 */ line-height: 50px; /* 我們設定行高等于盒子的高度,就可以使文字垂直居中 */ color: #fff; font-size: 22px; text-decoration: none; /* 取消下劃線 文本裝飾 */ } a:hover { /* 鼠标經過 給我們的鍊接添加背景圖片*/ background: url(images/h.png) no-repeat; } </style> </head> <body> <a href="#">專區說明</a> <a href="#">申請資格</a> <a href="#">兌換獎勵</a> <a href="#">下載遊戲</a> </body>
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!