首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-03-19 14:37:00

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

  1. background-color 背景顔色
  2. background-image 背景圖片地址
  3. background-repeat 是否平鋪
  4. background-position 背景位置
  5. background-attachment 背景固定還是滾動
  6. 背景的合寫(複合屬性) 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 :  百分數 | 由浮點數字和單位标識符組成的長度值。請參閱長度單位

position :  top | center | bottom | left | center | right

說明:

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

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

注意:

  1. position 後面是x坐标和y坐标。 可以使用方位名詞或者 精确單位。
  2. 如果和精确單位和方位名字混合使用,則必須是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>

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
金瀚把李一桐按進蛋糕(烏雲遇皎月李一桐曾可妮平分秋色)
金瀚把李一桐按進蛋糕(烏雲遇皎月李一桐曾可妮平分秋色)
  #頭條創作挑戰賽#   《烏雲遇皎月》正在熱播中,該劇集合了懸疑、愛情、浪漫、奇幻等元素,主要講述了學霸修理工與懸疑推理女作家的愛情故事。   《烏雲遇皎月》改拍自丁墨的原著小說,男主邬遇(金瀚飾演)與譚皎(李一桐飾演)在一次郵輪旅行中相遇,二人一見鐘情。旅行結束後,譚皎和邬遇的部分記憶缺失,邬遇失去了幾天的記憶,而譚皎失去了一年前的記憶。      譚...
2026-03-19
懷念ag 老成員(AG雜志樂手專訪來自納什維爾的作曲人兼樂手Darrell)
懷念ag 老成員(AG雜志樂手專訪來自納什維爾的作曲人兼樂手Darrell)
  在看到 4 個月的比利牛斯犬 Angus 和活 潑的澳大利亞牧羊犬 Miller 之後,就知 道快到 Darrell Scott 的家了,兩隻狗狗會在 石子路上蹦蹦跳跳,伸出舌頭,搖着尾巴。它 們本是用來看護羊群,免受納什維爾東部 100 公裡之外在坎伯蘭高原林區的山上四處覓食的 土狼和野豬的侵擾,不過不論何時,隻要有人來, 它們都會非常高興。小狗會馬上...
2026-03-19
聶遠妻子秦子越家庭背景(聶遠攜愛妻秦子越低調現身機場)
聶遠妻子秦子越家庭背景(聶遠攜愛妻秦子越低調現身機場)
  今天,有媒體曝光了一組近日聶遠與妻子秦子越一同回京的照片中。夫妻倆戴着口罩、帽子低調現身,全程雙手緊握,小動作恩愛又甜蜜,在機場默默地秀了一波恩愛~      去年,聶遠憑借《延禧攻略》、《皓镧傳》這兩部熱播劇再次翻紅,也收獲了“大豬蹄子”的稱号。雖然在戲中是“大豬蹄子”,但到了劇外,聶遠卻是一位對妻子、女兒極盡寵愛的好丈夫,好爸爸。      當天,聶...
2026-03-19
推薦免費的音遊(來自東方的神秘力量)
推薦免費的音遊(來自東方的神秘力量)
  《喵斯快跑》向來都是一個聯動鬼才。   在我還沉浸在它與《多娜多娜》聯動的餘韻中時,突然公布的一個新聯動,再次打了我一個措手不及,讓我回想起了那個已遺忘許久的身份——東方廚。      太美辣!   根據這一個月陸陸續續放出的聯動情報,不難看出這次聯動的“東方味兒”相當純正,不愧是“老二次元”發行商——心動發行的遊戲,怕不是内部有不少老懂哥。選擇的聯動曲...
2026-03-19
睡前運動操瘦腿(睡前15秒瘦大腿操輕松燃脂)
睡前運動操瘦腿(睡前15秒瘦大腿操輕松燃脂)
  睡前15秒瘦大腿操輕松燃脂   大腿好難瘦?大腿是很多女生公認最難減的位置,鏟除肥厚馬鞍肉、松垮大腿肉,天天做瘦腿操,2步驟就能燃燒深層脂肪,幫助鍛煉腿部肌肉!      繁忙的日常生活之中,總為了家庭、工作以及育兒等等蠟燭多頭燒,天天長時間在辦公室裡前傾盯着電腦,或是久站服務客人,導緻雖然身心疲勞,身體卻因為缺乏活動而血液循環不良,再加上不敵歲月流逝,...
2026-03-19
Copyright 2023-2026 - www.tftnews.com All Rights Reserved