首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-05-24 13:12:16

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-05-24
銷售的穿搭技巧是什麼呢(韓松庭我是如何學會銷售技能和公衆演說方法的)
銷售的穿搭技巧是什麼呢(韓松庭我是如何學會銷售技能和公衆演說方法的)
  我是如何學會   銷售技能與公衆演說方法   輕松增加收入   日薪過千、月入過萬   一小時賺到15萬元   這一切是如何做到的?   親愛的朋友:   你好,我是富老師品牌創始人韓松庭,當我學會銷售成交技能與公衆演說方法之後,不僅很快實現了日入過千、月入過萬,而且:   創造了一小時賺到15萬的奇迹,這一切,究竟是如何做到的?接下來為你分享一下:  ...
2026-05-24
白百何捉妖記2預告片(捉妖記2宣發避談白百何)
白百何捉妖記2預告片(捉妖記2宣發避談白百何)
  眼看着還有半個月就要過年了,一年最火的電影春節檔也即将拉開序幕,似乎春節檔就是電影公司賺錢的大票倉。今年的春節檔其火爆不亞于過去的任何一年,參賽選手也多是大卡司,都有哪些呢?      最受人關注的有“前中國電影影史票房冠軍”《捉妖記》的續集《捉妖記2》,鄭寶瑞“西遊記電影系列”的第三部《女兒國》,陳思成導演,王寶強主演的《唐人街探案2》,各個都是在前作...
2026-05-24
野狼disco 為什麼這麼火(野狼disco為什麼很火)
野狼disco 為什麼這麼火(野狼disco為什麼很火)
  有這麼一首歌,最近在各大 短視頻平台 很火   聽第一遍時感覺很土   聽第二遍時就要搖頭   聽第三遍時就要畫龍、畫彩虹   聽第四遍時,感覺這是歌手 面對失落時,的反抗   聽第五遍時 感覺到歌手 在鼓勵人們 重新振奮   聽第六遍時 可能會讓你流淚、這可真是、土到極緻便是潮、嗨到深處亦悲傷      這首歌畫面感 确實很強。完整的故事,迪斯科的搖擺...
2026-05-24
婦女兒童服務陣地建設的重要性(開篇之勢展新姿)
婦女兒童服務陣地建設的重要性(開篇之勢展新姿)
  德陽市婦女兒童服務中心遷入新址後,終于迎來了開班的日子,德陽婦女兒童終于又有了自己專屬的高品質活動場所!前期,在德陽市婦聯的關心指導下,線上線下聯動宣傳,并面向全社會婦女、兒童招生。經過曆時一個多月的報名、選拔、錄取,9月初,新中心迎來了落成以來的第一批學員,共計309名。   這個秋期,中心招錄成立了開心麻花兒童劇團、德慧舞蹈藝術團、童慧舞蹈藝術團、童...
2026-05-24
Copyright 2023-2026 - www.tftnews.com All Rights Reserved