首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-05-21 10:10:19

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
推荐阅读
蘇聯為什麼能反攻莫斯科(損失慘重的蘇聯)
蘇聯為什麼能反攻莫斯科(損失慘重的蘇聯)
  1941年6月22日淩晨3點15分,德軍以總兵力550多萬人的空前作戰規模,在4900餘架戰機、3700輛坦克、 47000門大炮、190餘艘艦艇的配合下,對蘇聯發動了代号為“巴巴羅薩”的軍事打擊,襲擊了蘇聯西部邊境的幾個大軍區。德國空軍首先突襲了西部邊境的蘇聯空軍機場,然後大批德軍裝甲坦克集群在寬大的正面向蘇聯發起了快速攻擊,蘇軍被迫應戰……     ...
2026-05-21
99a有什麼優缺點(新一批99A浩浩蕩蕩出廠)
99a有什麼優缺點(新一批99A浩浩蕩蕩出廠)
  新一批99A浩浩蕩蕩出廠,目标指向39集團軍某機步師,99A坦克是我國在前型99式主戰坦克基礎上自行研制的第三代改進型主戰坦克,采用原99式坦克的車體結構,在火力打擊、導航定位、晝夜觀瞄、動力傳動等系統上,采用新技術、新材料進一步提升了戰車的綜合作戰效能。據推測其最大作戰行程為500公裡。      99A坦克全車長7.7米,全寬3.5米,全高2.25米...
2026-05-21
楊紫戰長沙把霍建華演哭了(楊紫和霍建華含蓄的愛)
楊紫戰長沙把霍建華演哭了(楊紫和霍建華含蓄的愛)
  電視劇表達愛情用得最濫的情節之一肯定有擁吻,就連古裝劇也沒有例外,甚至更比都市劇有過之而無不及——套路非常恒定:第一次見面,不管大路多麼寬廣,兩個人總能碰在一起,然後總能抱住,一旦抱在一塊,嘴唇的位置總能恰到好處地兩兩對印,而且無論雙方高度有多大懸殊都不是事。   要是碰不上,也有辦法,那就來一波強吻,現在上線的《雙世寵妃2》全程都在賣這個景色,跟《1》...
2026-05-21
趙露思生圖被網友吐槽(看趙露思騎真馬哇哇大哭)
趙露思生圖被網友吐槽(看趙露思騎真馬哇哇大哭)
  《星漢燦爛》開播,有多少人被一幫老戲骨的演技驚豔就有多少人對趙露思傻白甜式演技感覺到失望。   在一群微表情都意味深長的老戲骨之中,趙露思隻會傻乎乎張大嘴巴說着台詞的樣子可真的被秒成了渣渣~      這次趙露思《星漢燦爛》的現場花絮還被導演組放出來,隻見趙露思和吳磊同騎一匹馬,即使有個男子在身後護着趙露思依舊覺得心驚膽戰,吓得在馬上哇哇大哭起來,或許導...
2026-05-21
田蕾是獨立的女人嗎(看了誰說我結不了婚)
田蕾是獨立的女人嗎(看了誰說我結不了婚)
     這是一部由潘粵明、童謠、陳數、袁文康、許芳銥、李燊主演的都市言情戲。三個大齡女生充滿了正能量,童謠演的程璐是一個35歲金牌編劇,陳數演的田蕾是一家律師事務所的一姐,許芳銥演的是美容院老闆丁詩雅,她們都熱愛生活,健康善良,對工作有目标、肯拼搏,對于愛情,她們敢于堅持,都是讨人喜歡的女孩。但今天小編想聊的是陳數演的田蕾,陳數是一個絕對的實力派演員,年過...
2026-05-21
Copyright 2023-2026 - www.tftnews.com All Rights Reserved