首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-04-18 04:18:33

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
推荐阅读
曆史上洛陽地區下轄多少縣(1952年河南洛陽下轄11個縣)
曆史上洛陽地區下轄多少縣(1952年河南洛陽下轄11個縣)
  河南洛陽是我國的四大古都之一,建都時間算的話是我國的第一大古都,長期是河南府的駐地。其實河南省名稱的确定就是舊來自于洛陽河南府,不過奇怪的是洛陽從來沒有做過河南省的省會,可能跟地理位置有關系,實在太偏西了。發展到如今洛陽僅下轄7個縣,不過仍然是中西部地區非省會地級市 GDP第1名,而在1952年河南洛陽下轄11個縣,廣大的豫西地區都是洛陽專區管轄,曾經鼎...
2026-04-18
道德經第三十二章個人理解(道德經二十五章)
道德經第三十二章個人理解(道德經二十五章)
  今天我們來學習道德經的第二十五章。原文:   有物混成,先天地生。寂兮寥(liao二聲)兮,獨立而不改,周行而不殆,可以為天地母。吾不知其名,強字之曰道,強為之名曰大。大曰逝,逝曰遠,遠曰反。   故道大,天大,地大,人亦大。域中有四大,而人居其一焉。人法地,地法天,天法道,道法自然。   為了節約時間,原文我就不念了,接下來直接翻譯一下這章:     ...
2026-04-18
最新豬市行情與走勢分析(豬市走向本輪屠牛完成)
最新豬市行情與走勢分析(豬市走向本輪屠牛完成)
  學習養殖技術、了解最新行情,在線咨詢養殖難題和老師零距離交流,請點擊右上角關注↗豬大夫在線。      想想從3月份開始至今的豬市,真的是一場絕地之戰,屠宰企業的屠牛動作穩準狠,把養豬人逼到了絕地之内。而随着牛豬的出欄,養殖戶算是把手裡的雷扔出去了,現在還怕什麼壓價,盡管來,如今豬價開始絕地反擊,超跌之後的修複。   其次,在這次跌價事件中,屠宰企業不但...
2026-04-18
奔跑吧第一季陣容官宣(奔跑吧全新陣容合體亮相春推會)
奔跑吧第一季陣容官宣(奔跑吧全新陣容合體亮相春推會)
  3月28日,全新一季《奔跑吧》家族的七位成員李晨、Angelababy、鄭恺、朱亞文、王彥霖、黃旭熙、宋雨琦合體亮相浙江衛視春推會,兄弟團相聚一堂,其樂融融、笑聲不停。現場還有《王牌對王牌》家族沈騰、賈玲、華晨宇、關曉彤歡樂集結,更有《中國好聲音》全新導師王力宏驚喜出席,浙江衛視新年的亮相可謂是全員出動大陣仗了。      超長花絮引爆全場,李晨撕名牌以...
2026-04-18
融化在每一次的擁抱(臣服在每一瞬間)
融化在每一次的擁抱(臣服在每一瞬間)
  臣服這不是讓大家被動,而是投入在每一個瞬間,同時站在這個甯靜看這個瞬間。   這麼做,痛苦、窩囊和不舒服自然會消失。   臣服和容納一切,并不是什麼都不做,而是一個最自由的選擇。   面對當下所帶來的一切不去抵抗,不光是因為抵抗沒有用,甚至還會造出更多煩惱和不順。   活在當下的動,反而可以完成一般人認為不可思議的事。   一般人做事,很少是從内心的甯靜...
2026-04-18
Copyright 2023-2026 - www.tftnews.com All Rights Reserved