首页
/
每日頭條
/
圖文
/
css中設置背景圖像位置
css中設置背景圖像位置
更新时间:2026-08-14 19:36:03

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
推荐阅读
野狼disco 為什麼這麼火(野狼disco為什麼很火)
野狼disco 為什麼這麼火(野狼disco為什麼很火)
  有這麼一首歌,最近在各大 短視頻平台 很火   聽第一遍時感覺很土   聽第二遍時就要搖頭   聽第三遍時就要畫龍、畫彩虹   聽第四遍時,感覺這是歌手 面對失落時,的反抗   聽第五遍時 感覺到歌手 在鼓勵人們 重新振奮   聽第六遍時 可能會讓你流淚、這可真是、土到極緻便是潮、嗨到深處亦悲傷      這首歌畫面感 确實很強。完整的故事,迪斯科的搖擺...
2026-08-14
剛做了人工流産應該注意哪些事項(女性做完人工流産手術後)
剛做了人工流産應該注意哪些事項(女性做完人工流産手術後)
  女性做完人工流産手術後   要注意哪些事項?   1、保持外陰的清潔,嚴禁同房。人工流産術後若過早同房,易造成急性子宮内膜炎、盆腔炎,還可繼發不孕。因此,人工流産術後一月内嚴禁房事。      2、注意休息,加強營養。人工流産術後應卧床休息2—3天,再下床活動,逐漸增加活動時間。   3、觀察出血情況。人工流産術後陰道流血超過一周以上,甚至伴有下腹痛、發...
2026-08-14
貝加爾湖畔音樂介紹(怎樣評價貝加爾湖畔這首歌)
貝加爾湖畔音樂介紹(怎樣評價貝加爾湖畔這首歌)
  初聽不識曲中意,再聽已是曲中人。或許是因為一段曾以為會很長久很長久的感情忽然終止,聽一些對舊事和感情回憶的歌曲都能讓我不受控制的把自己帶入。如果年少的自己不那麼計較,多一些體諒,或許的或許,會有不一樣的結局呢,或許的或許,不會錯過呢,青蔥的我,單純的你。以前還沒分手的時候,我隻是覺得這首歌的旋律好聽,還以為是寫貝加爾湖的甯靜美麗呢。現在才懂,那是對美好的...
2026-08-14
秋葉原之旅最新預告(秋葉原之旅Festa發布會)
秋葉原之旅最新預告(秋葉原之旅Festa發布會)
  秋葉原作為日本的旅遊勝地而被大家所熟知,但是在繁華景象的背後卻隐藏着一些不為人知的秘密。《秋葉原之旅》是一款以秋葉原為舞台的動作冒險遊戲,講述了主角和被稱為“陰妖子”的吸血鬼展開鬥争的故事。   遊戲中出現了許多的真實場景,讓玩家可以領略到動作遊戲不一樣的緊張感。   而近日遊戲開發商DMM在位于秋葉原的“挖掘!寫真偶像文化祭”咖啡廳舉辦了《秋葉原之旅F...
2026-08-14
知否中的劉海造型(知否鼻子很好看)
知否中的劉海造型(知否鼻子很好看)
  有人說,鼻整形就像是在平地“起高樓”!   而老路認為,鼻整形更像是依山建的“别墅”,錯落有緻才好看!      但無論是“高樓”還是“别墅”,都必須打好基礎,我們的鼻基底就是鼻子的基礎。   同樣高度的樓房,建立在不同海拔的“地基”之上,最終看到的視覺效果是不一樣的!   所以,要想讓我們的面部更為飽滿、立體!不僅要有好看的鼻子,還需有穩固飽滿的鼻基底...
2026-08-14
Copyright 2023-2026 - www.tftnews.com All Rights Reserved