首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-07-02 08:57:52

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
推荐阅读
魯迅先生有沒有罵過日本人(魯迅從來不罵蔣介石)
魯迅先生有沒有罵過日本人(魯迅從來不罵蔣介石)
     魯迅罵蔣介石為“法斯斯蒂”   中評社北京7月17日電(作者 汪毅夫)近有友人垂問:魯迅從來不罵蔣介石嗎?幷說網上盛傳“魯迅不罵蔣介石”的相關文章。我的回應是:如果“罵”是“批評”的意思,則魯迅罵過蔣介石,我很快就會寫短文說明和證明。同時,我的反應是,從網上搜索,看到了許多“相關文章” :有著名的李敖大師的, 也有不具名的無名氏的;有主張和附議的,...
2026-07-02
農村山上的野果有幾種(農村山坡上一野果樹)
農村山上的野果有幾種(農村山坡上一野果樹)
  回想起以前,在農村的秋冬季節裡,漫山遍野都是熟透的野果,雖然那會沒有過多的錢去買各種美味進口水果,但是能夠有吃不完的野果子,這都讓兒時在鄉下的孩子們十分滿足了。所以,今天還是給大家介紹一款在農村很常見的野果,看看小夥伴們究竟有多少人都見過吧!      農村山坡上一“野果樹”,可結出小柿子,風幹在樹上,十多元一斤!   今天給大家介紹的這種植物,在鄉下地...
2026-07-02
《五個哥哥終于找到了我》(5個哥哥尋遍萬裡為其追兇)
《五個哥哥終于找到了我》(5個哥哥尋遍萬裡為其追兇)
  兄弟遇害後,五個兄弟為了給弟弟一個公道,持續追兇堅持了一年多,跋山涉水跨越萬裡這樣的一份情誼令人十分感動,他們的努力會換來自己想要的答案嗎?一起去看看今天的這起五兄弟追兇吧。      代家五兄弟雨夜追兇   在風雨交加的夜晚,代家兄弟們的心中燃起了一抹希望的火焰。他們深信,正義終将到來,兇手将無處可逃。無論多麼漫長的黑夜,黎明終将到來,揭開案件的真相,...
2026-07-02
薩克斯演奏之前的組裝方法(薩克斯演奏技巧探究)
薩克斯演奏之前的組裝方法(薩克斯演奏技巧探究)
     接着,當然要說說吹奏薩克斯的基本方法了:   要成功地演奏好薩克斯管,首先必須訓練自己對音樂的感受力及理解能力,平時要多學習一點薩克斯管以外的理論。薩克斯管的演奏其實包括兩個大部分,其一就是對基本功的訓練,内容包括:好的演奏姿勢、口形、運氣的方法、音色、熟練的指法、清晰敏捷的吐音;其二就是技巧。技巧是建立在基本功的基礎上的,奏效果。一般情況下常用的...
2026-07-02
自己做野釣鲫魚魚餌配方(自制春釣水庫鲫魚餌配方)
自己做野釣鲫魚魚餌配方(自制春釣水庫鲫魚餌配方)
  已是春季,這個時候出門垂釣,再合适不過了。春季水庫是很多釣魚人向往的事,寬闊的湖面倒映着藍天白雲,就這景緻也足夠享受了。不僅如此,最好能有巨物上鈎更不枉此行。   今天咱們讨論一下庫釣做什麼餌才有好魚獲?   這裡有一款自制魚餌,分享給釣友們,大家來嘗試一下,或許讓你有意想不到的收獲!      這款自制餌用到的小麥會有點多,大家盡可能多準備些。因為在開...
2026-07-02
Copyright 2023-2026 - www.tftnews.com All Rights Reserved