css中設置背景圖像位置-tft每日頭條

CSS 可以添加背景顔色和背景圖片，以及來進行圖片設置。

background-color 背景顔色
background-image 背景圖片地址
background-repeat 是否平鋪
background-position 背景位置
background-attachment 背景固定還是滾動
背景的合寫（複合屬性） background:背景顔色背景圖片地址背景平鋪背景滾動背景位置

背景圖片(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 : 　背景圖像在橫向上平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

css中設置背景圖像位置（CSS背景background）1

背景位置(position)

語法：

background-position : length || length background-position : position || position

參數：

length : 　百分數 | 由浮點數字和單位标識符組成的長度值。請參閱長度單位

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。

如果隻指定了一個值，該值将用于橫坐标。縱坐标将默認為50%。第二個值将用于縱坐标。

注意：

position 後面是x坐标和y坐标。可以使用方位名詞或者精确單位。
如果和精确單位和方位名字混合使用，則必須是x坐标在前，y坐标後面。比如 background-position: 15px top; 則 15px 一定是 x坐标 top是 y坐标。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

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>