首页
/
每日頭條
/
圖文
/
css樣式基礎與整體總結
css樣式基礎與整體總結
更新时间:2026-06-03 15:00:33
一、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
推荐阅读
拔牙改善臉型嗎
拔牙改善臉型嗎
幾年前,楊幂曾在電視節目中說,“我的小臉并非天生,而是靠拔牙才變小的……”此言一出,讓許多正為擁有一張大餅臉或國字臉犯愁的女孩們有些興奮。盡管楊幂強調說,雖然拔牙會讓臉變小,但有些人拔牙後會導緻面部塌陷、肌肉松弛、大家不要随便嘗試,但還有有...
2026-06-03
種植洋蔥幾月育苗
種植洋蔥幾月育苗
種植洋蔥幾月育苗?為了更及時的閱讀到我分享給大家的,有關農業技術方面的信息,請點擊我的頭像關注我,下面我們就來說一說關于種植洋蔥幾月育苗?我們一起去了解并探讨一下這個問題吧!種植洋蔥幾月育苗為了更及時的閱讀到我分享給大家的,有關農業技術方面...
2026-06-03
成語故事量力而行
成語故事量力而行
成語故事量力而行?鞭長莫及的成語故事出自于《左傳·宣公十五年》:“雖鞭之長,不及馬腹”,現在小編就來說說關于成語故事量力而行?下面内容希望能幫助到你,我們來一起看看吧!成語故事量力而行鞭長莫及的成語故事出自于《左傳·宣公十五年》:“雖鞭之長...
2026-06-03
淘寶開小号被凍結
淘寶開小号被凍結
在一些電商平台上不少商家都借着刷單、刷評價來給自家的商品攢人氣于是就有不法分子瞄準了這樣的“商機”動起了販賣淘寶賬号的歪腦筋去年12月,甯波江北警方在日常工作中發現,有人在網上大量出售淘寶賬号,這麼多的淘寶賬号從何而來?這背後又有怎樣的貓膩...
2026-06-03
環球漫遊随身wifi提前多久預訂
環球漫遊随身wifi提前多久預訂
就像攻略社區和商業化之間還存在一個斷層,尋一個入口打通目的地産品交易也有一大段路要走——除了考慮必須的兩端因素:流量和産品,從不同角度切入時還應該考慮一個邏輯的問題——用戶是否真有通過這個入口,完成整個目的地的産品和服務的消費的行為和習慣。...
2026-06-03
Copyright 2023-2026 - www.tftnews.com All Rights Reserved