首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-07-22 19:38:41

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-07-22
15萬到20萬中型suv哪一款值得選擇(綜合性價比比較高的三款中型SUV)
15萬到20萬中型suv哪一款值得選擇(綜合性價比比較高的三款中型SUV)
  對于大部分的消費者來說,20萬左右的中型SUV具有很強的實用價值,畢竟國内大部分這個級别消費者的核心訴求就是為了代步,說白了就是坐着舒服、開着舒服、用着放心,今天我就為大家挑選3款綜合性價比特别高的SUV車型,本田的CR-V、别克昂科威和雪佛蘭探界者。      第一、本田CR-V   當年這個車簡直就是加價神車,耐用省心就是它的标簽,這幾年的銷量也不錯...
2026-07-22
cfpl ag 陣容(CFPL青訓選手哪家強)
cfpl ag 陣容(CFPL青訓選手哪家強)
  CFPL S16常規賽已經進行到了第六輪,可謂緊張激烈,精彩紛呈。本屆聯賽最大的特色,就是引入了很多新人,給觀衆帶來了耳目一新的感覺。除了一些替補選手外,大量青訓隊員的上陣成為賽場上一道靓麗的風景線。但說一千道一萬,歸根結底,無論隊伍的陣容怎樣變化,能夠獲勝才是最關鍵的。下面我們就來讨論一個有趣的話題,分析下這批新人中,究竟哪支戰隊的比較厲害。     ...
2026-07-22
漫威鋼鐵俠淚目瞬間(漫威最燒錢的片段)
漫威鋼鐵俠淚目瞬間(漫威最燒錢的片段)
  喜歡漫威電影的小夥伴大家好,我是皮影匠!漫威電影之所以如此成功,除了精彩故事的設定以外,還有逼真的特效。衆所周知特效越多投資越高,就是因為漫威舍得花錢,才會帶來這麼多精彩的作品。那麼你知道在《複聯4》中哪些片段最燒錢嗎?         首先就是複仇者為了尋找寶石,準備穿越回到過去時的片段。除了演員是真實的以外,包括複仇者穿戴的戰甲全部都是特效合成的。根...
2026-07-22
星際争霸十大最惡心戰術(這些單位雖然其貌不揚)
星際争霸十大最惡心戰術(這些單位雖然其貌不揚)
  星際争霸2現今已經開放到了虛空之遺資料片,随着許多版本的更新玩家們的戰術體系和兵種的搭配也是不斷地更新,玩家們對于這款遊戲的理解也是一直在加深,星際二初期人族從古老的“真善美”亂七八糟一波流到後續的各種戰術,包括玩家們經常吐槽的神族“祖傳4BG”和各種花式一波,以及蟲族的“龍狗毒爆”這些古老的戰術一直更新到現今的各種神奇的搭配都在向玩家訴說遊戲和玩家的進...
2026-07-22
Copyright 2023-2026 - www.tftnews.com All Rights Reserved