首页
/
每日頭條
/
圖文
/
css樣式基礎與整體總結
css樣式基礎與整體總結
更新时间:2026-05-20 06:47:36
一、CSS背景屬性1.背景顔色(background-color)

屬性值:transparent(透明的)或color(顔色)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)1

css樣式基礎與整體總結(CSS基礎知識七CSS背景)2

2.背景圖片(background-image)

屬性值:none(沒有)或url(使用絕對或相對地址指定背景圖像)

優點:非常便于控制位置(精靈圖也是一種運用場景)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)3

css樣式基礎與整體總結(CSS基礎知識七CSS背景)4

3.背景平鋪(background-repeat)

屬性值:repeat|no-repeat|repeat-x|repeat-y

背景圖片會壓住背景顔色

css樣式基礎與整體總結(CSS基礎知識七CSS背景)5

css樣式基礎與整體總結(CSS基礎知識七CSS背景)6

4.背景圖片位置(background-position)

background-position:x y;

  1. x坐标和y坐标可使用方位名詞或精确單位
  2. 方位名詞a. x可為left | center | right ,y可為top | center | bottomb. top left 和 left top 效果一緻(與順序無關)c. 若隻指定一個方位名詞,另一個值忽略,則第二個值默認為居中對齊
  3. 精确單位a.先x坐标後y坐标b.若隻指定一個值,則為x,另一個值為垂直居中
  4. 混合單位:若混合使用,第一個值為水平x,第二個值為垂直y
5.背景圖片固定(background-attachment)

屬性值:scroll(随内容滾動)| fixed(背景固定)

css樣式基礎與整體總結(CSS基礎知識七CSS背景)7

css樣式基礎與整體總結(CSS基礎知識七CSS背景)8

6.背景複合寫法(background)

background:背景顔色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置

7.背景色半透明(CSS3提供了背景顔色半透明的效果)
  • background:rgba(0,0,0,.3);
  • red green blue alpha(透明度 範圍0~1)
  • 習慣把0.3的0省掉
  • 背景半透明是指盒子背景半透明,盒子裡面的内容不受影響
,
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
推荐阅读
剪映教學新手入門從零開始(小白學剪映剪映入門學習)
剪映教學新手入門從零開始(小白學剪映剪映入門學習)
  #初學剪輯# #小白學習自媒體##剪映入門#各位友友們好!我寫這個微頭條也是希望更多的新手小白容易上手,其實這個剪輯軟件并不難學習。主要是學會使用之後的運用技巧和創作玩法。同樣的功能可以不同精彩效果的作品,有些可以疊加,有些可以組合,有些可以調換順序等,主要看個人的創意思維。   廢話不多說,下面直接上圖。   1、創作按鍵      大家打開剪映...
2026-05-20
香港和勝和最新選坐館消息(和勝和坐館雞腳黑)
香港和勝和最新選坐館消息(和勝和坐館雞腳黑)
  他曾因愛人被掌掴,号令社團衆人,直接殺到仇家總部,将仇家的臉面按在地下摩擦。   曾經不可一世的黑幫新義安,被他澆滅了嚣張氣焰,對他退避三舍。   他就是香港黑幫“和勝和坐館”,“雞腳黑”。      50年代“雞腳黑”出生于香港,原名招國強。在“雞腳黑”出生直至他懂事的時候,他的家世在當地都稱得上“大戶人家”。   自幼“雞腳黑”便過着錦衣玉食,衣來張...
2026-05-20
如何走出人生規劃的誤區(自控力和對周圍的規劃能力)
如何走出人生規劃的誤區(自控力和對周圍的規劃能力)
     今天我們接着學《弟子規》,一晃馬上要學完了,也就還有那麼兩三天了,昨天我們講了“墨磨偏,心不端,字不敬,心先病。”   我覺得我們現在大家推崇的匠人精神應該是最佳體現了,那種凝神靜氣,然後把手中的小事認真的做好,那麼在大方向上是為大家忘記名利,把手中的事做得紮紮實實,這就是道的具體體現。   今天我們學習的這句話叫“列典籍,有定處,讀看畢,還原處。...
2026-05-20
如何讓自己變得優秀的幾個小竅門(如何讓自己變得更加優秀)
如何讓自己變得優秀的幾個小竅門(如何讓自己變得更加優秀)
  要想優秀,首先要敢于伸手去夠那些更高的果子。很多時候把手伸出去、把腳踮起來,已經戰勝了90%的人。   如何讓自己變得更加優秀?   這裡準備了16條法則,希望對你有所幫助。   1   對自己的行為負責   當自己所處的境遇不好的時候,更要多看看自己身上的原因。   有一句話說,你現在在哪兒是你過去兩年來的選擇決定的;你兩年後在哪兒是你接下去兩年中的選...
2026-05-20
魔界大戰困難單人門檻怎麼打(魔界大戰超詳細攻略)
魔界大戰困難單人門檻怎麼打(魔界大戰超詳細攻略)
  魔界大戰就要更新了,為了讓各位能更快的打進魔界大戰副本裡,這裡提前給各位準備了魔界大戰所有BOSS的攻略,快來看看吧!   入場介紹      角色等級達到95級即可選擇魔界大戰頻道進入   頻道進入無需完成普雷主線任務和之後的主線任務(英雄模式為DPL型式,不掉落CP護石材料)         完成魔界大戰主線任務後會出現外傳任務:[護石]未知的石頭、...
2026-05-20
Copyright 2023-2026 - www.tftnews.com All Rights Reserved