首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-07-28 09:54:17

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
推荐阅读
雙11在什麼網購物好(雙11駕到)
雙11在什麼網購物好(雙11駕到)
     (一)恩施州市監局、州消委發布“雙11”消費警示   防止商家套路是關鍵   恩施晚報訊(全媒體記者楊亞玲 通訊員譚玲)又是一年“雙11”,網絡購物狂歡盛會即将開啟,您的購物車是否已滿,網絡直播購物鬧鐘提醒是否已設置?恩施州市場監管局、州消費者委員會提醒您貨比三家,理性購物。   仔細查看宣傳廣告,防止商家虛假宣傳。近兩年,網絡視聽電子商務直播興起...
2026-07-28
香港和勝和最新選坐館消息(和勝和坐館雞腳黑)
香港和勝和最新選坐館消息(和勝和坐館雞腳黑)
  他曾因愛人被掌掴,号令社團衆人,直接殺到仇家總部,将仇家的臉面按在地下摩擦。   曾經不可一世的黑幫新義安,被他澆滅了嚣張氣焰,對他退避三舍。   他就是香港黑幫“和勝和坐館”,“雞腳黑”。      50年代“雞腳黑”出生于香港,原名招國強。在“雞腳黑”出生直至他懂事的時候,他的家世在當地都稱得上“大戶人家”。   自幼“雞腳黑”便過着錦衣玉食,衣來張...
2026-07-28
人過四十後看淡簡單的生活(人到四十以後隻有)
人過四十後看淡簡單的生活(人到四十以後隻有)
     塵世間太多的情感,總是虛無缥缈,如水中之月,霧裡看花,追不到,摸不着,守不住,又放不下。   深陷紅塵的我們,常常會迷失在塵世之中,行色匆匆的專注趕路,卻忘了自己,也忘了看看沿途的風景。   一晃,已過而立之年,步入了不惑之年,此時,沉穩,從容才是大境界。   俗話說:四十不惑。過了四十,哪些事情應該堅持,哪些事情應該扔掉,心裡應該有數了。   人...
2026-07-28
冬季寒潮是冷鋒還是反氣旋(寒潮是反氣旋還是冷鋒)
冬季寒潮是冷鋒還是反氣旋(寒潮是反氣旋還是冷鋒)
  答:   寒潮:大範圍的強烈的冷空氣活動。侵襲我國的寒潮來自亞歐大陸上的冷高壓活動。故,寒潮是反氣旋。   冷鋒:冷空氣向暖空氣方向移動的鋒。冬季,形成于蒙古、西伯利亞的強大的冷高壓經常活動,并常常南下進入我國,形成寒潮。此時,冷空氣向暖空氣方向移動。故,寒潮是冷鋒。   寒潮屬于天氣現象,且屬于一種災害天氣現象。反氣旋、冷鋒屬于天氣系統。非要把兩挂上鈎...
2026-07-28
為什麼現在單身的特别多(單身為什麼越來越多了)
為什麼現在單身的特别多(單身為什麼越來越多了)
  “這一晃,十來年過去了……唉是啊,我一直單着,你也是。哦,你離了?咳,也好……”   前不久,小編和一些多年不見的老同學聚會,二十來個人,無論男女,超過一半都單身。   其中三個人,之前結過婚,後來都離了,獨自生活。   這大概就是當今社會的一個切片。      就小編我所知,那些和我基本同齡的熟人,常年一個人過日子的,多得是。   我的老媽,前些年也沒...
2026-07-28
Copyright 2023-2026 - www.tftnews.com All Rights Reserved