首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-09-12 22:55:42

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-09-12
民進會員享有什麼權利(民進會員在行動)
民進會員享有什麼權利(民進會員在行動)
  近日,上海本土新冠肺炎疫情反複,防控形勢嚴峻複雜。廣大民進會員積極貫徹落實疫情防控的部署要求,凝心聚力,勇擔責任,奔赴疫情防控各條戰線,為堅決打赢疫情防控阻擊戰,全力守護城市安全有序與市民群衆健康安全,展現民進擔當與作為。   民進金山區委   堅守崗位,守土有責      左圖:吳鳴;右圖:俞紅麗(左二)   亭林醫院閉環管理期間,民進金山區委副主委吳...
2026-09-12
韓國什麼方便面好吃(韓國方便面餐館)
韓國什麼方便面好吃(韓國方便面餐館)
  去年黃磊版的《深夜食堂》被人們吐槽,大半夜跑到飯店去就為吃一碗老壇酸菜牛肉面?國産《深夜食堂》雖然是模仿日本原版《深夜食堂》的,但的确沒有學到精華,因為至少日本的拉面店不是用方便面來招待客人的,不過如果放到韓國去,你進到的拉面館,有可能就是方便面館。      這是一家很不起眼的小店,位于韓國首爾,位于韓國延世大學和梨花女子大學的大學城範圍内,據一位在此...
2026-09-12
郭少芸離開tvb(郭少芸是誰出演過哪些作品)
郭少芸離開tvb(郭少芸是誰出演過哪些作品)
  [海峽網]   你或許不認識郭少芸這個名字,但是相信你一定會看過她的作品,她可是香港非常有名的惡女演員。在香港TVB工作了23年,剛剛離開。郭少芸是誰?郭少芸背景曝光,她年輕時候的照片顔值非常高,引來不少網友的贊美,小編今天就來為大家介紹一下郭少芸個人資料。      郭少芸是誰   郭少芸出生于1972年,是中國香港人。很多香港女演員都是通過參加香港小...
2026-09-12
或許我們真的合适隻是時間不湊巧(隻是時間不湊巧)
或許我們真的合适隻是時間不湊巧(隻是時間不湊巧)
  起初說好的一輩子,到後來說散也就散了,來年最陌生的是昨日最親的某某。      等待不是為了你能回來,而是找個借口不離開。      我們都很好,隻是時間不湊巧。      姑娘,長點心吧,别把人海一粒渣當成河畔一朵花。      既然已經塵埃落定,你又何必心神不甯。早知結局如此凄涼,當初何必義無反顧。給你機會從頭再來,你又如何預知未來。      靠得...
2026-09-12
Copyright 2023-2026 - www.tftnews.com All Rights Reserved