首页
/
每日頭條
/
圖文
/
css樣式基礎與整體總結
css樣式基礎與整體總結
更新时间:2026-03-03 06:17:07
一、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
推荐阅读
後半夜腰背部疼痛濕痹
後半夜腰背部疼痛濕痹
腰部背部啊疼痛,關節痹痛可以用萆薢。綿萆解BìXiè來源産地《中國藥典》為薯蓣科植物綿萆解的根莖。秋、冬季采挖,除去須根,洗淨,切片曬幹。性味功效《本草經解》葉天士氣平,味苦,無毒。主腰脊痛強,骨節風寒濕周痹,惡瘡不瘳。萆薢氣平,禀天秋降之...
2026-03-03
情人節賀卡推薦
情人節賀卡推薦
情人節賀卡推薦?花店必備朋友圈文案:,我來為大家科普一下關于情人節賀卡推薦?下面希望有你要的答案,我們一起來看看吧!情人節賀卡推薦花店必備朋友圈文案:1.謝謝你撐到我找到你。2.乍見覺歡,久處仍怦然。3.再等等,山南水北,我一定陪你去。4....
2026-03-03
國家普通話水平測試模拟試卷
國家普通話水平測試模拟試卷
國家普通話水平測試模拟試卷?一、讀單音節字詞(100個音節,共10分,限時3.5分鐘),今天小編就來說說關于國家普通話水平測試模拟試卷?下面更多詳細答案一起來看看吧!國家普通話水平測試模拟試卷一、讀單音節字詞(100個音節,共10分,限時3...
2026-03-03
苦海泛起浪花
苦海泛起浪花
苦海泛起浪花?沒人願意痛失自己所愛,誰願意呢?誰又想呢?可偏偏造物弄人,那份痛徹心扉、欲哭無淚的愛,讓我痛失,下面我們就來說一說關于苦海泛起浪花?我們一起去了解并探讨一下這個問題吧!苦海泛起浪花沒人願意痛失自己所愛,誰願意呢?誰又想呢?可偏...
2026-03-03
奔馳新款e300測試
奔馳新款e300測試
幾個月之前,梅賽德斯-奔馳完成了全新奔馳E300de型号的道路測試駕駛,那台搭載着2.0T柴油發動機的插電式混合動力車型,獲得了高達306Ps/400Nm的綜合最大輸出參數,并在9AT的支持下成為了一台能夠以5.8秒破百的中大型行政轎車,而...
2026-03-03
Copyright 2023-2026 - www.tftnews.com All Rights Reserved