css之背景(background)家族

来源:http://www.cnblogs.com/fangwei0701/archive/2016/12/07/6142817.html
-Advertisement-
Play Games

背景(background)是css中很重要的一部分，也是css的基礎知道之一，現在來回顧css2中5個屬性與css3中新增的3個屬性和2個功能。 CSS2_背景(background)前傳 家族成員 背景(background)家族在css2中由5個主要的背景屬性組成，分別是： 想知道家族五大成員 ...


背景(background)是css中很重要的一部分，也是css的基礎知道之一，現在來回顧css2中5個屬性與css3中新增的3個屬性和2個功能。

CSS2_背景(background)前傳

家族成員

背景(background)家族在css2中由5個主要的背景屬性組成，分別是：

background-color 　　　　　　指定填充的背景顏色
background-image 　　　　　　引用圖片作為背景圖
background-position　　 　　指定元素背景圖片的位置
background-repeat 　　　　  決定背景圖是不是平鋪
background-attachment 　　 背景圖是否滾動　　

想知道家族五大成員的詳細身份吧，欲知詳情，趕緊找個位置坐下，靜靜地聽我吹牛逼！

background-color 背景顏色

　　該成員只能用純色來填充背景。

background-color: colorName ;　 
colorName的取值： 
　　　　（1）顏色名 ： red、green、blue、skyblue……
　　　　（2）rgb() ： rgb(255,255,255)、rgb(12,202,29)……
　　　　（3）十六進位顏色值 ： #000000、#ffffff、#ff6600……
　　　　 特別取值（預設）： 　　　　
　　   　　（4）透明 ： transparent;　　//背景透明　

background-image 背景圖

　　該成員允許指定圖片來作為背景。

background-image:url(imagePath) ;     //imagePath指圖片路徑(相對路徑和絕對路徑)

最佳實踐：與（background-color）聯合使用，可保證在出現下麵幾種情況下，有背景色可以填充：

　　　　a> 圖片出不來(可能路徑錯、圖片不存在)；
　　　　b> 圖片被誤刪除；
　　　　c> 圖片在不平鋪的情況下覆蓋不了整個盒子；

background-repeat 背景平鋪

　　設置背景圖片時，該成員會預設把圖片在水平和垂直方向平鋪以鋪滿整個盒子。

background-repeat: propertyValue ;   //propertyValue指屬性值
propertyValue的取值：
　　　　(1)repeat :　　　　(預設)平鋪
　　　　(2)no-repaet :　　 不平鋪
　　　　(3)repeat-x :　　　水平方向平鋪
　　　　(4)repeat-y :     垂直方向平鋪

background-position 背景定位

　　該成員控制背景圖片在盒子中的位置，即：背景圖片左上角相對於盒子左上角的位置。

background-position:X-coordinate Y-coordinate ;        //(水平方向坐標 垂直方向坐標)
屬性的取值：
　　（1）百分比：10% ……
　　（2）像素值：10px ……
　　（3）方位名詞：
　　　　　　水平方向：left right center
　　　　　　垂直方向：top bottom center　

　　預設取值三種表達方式:

　　　background-position: left top ;
　　　background-position: 0px 0px ;
　　　background-position: 0% 0% ;

特別說明：

　　背景定位在使用百分數時，瀏覽器是以盒子尺寸的百分比數值來設置圖片的位置，舉例說明：

background-position: 40% 50% ;

　　40%指:背景圖在水平方向40%的位置，對應到該盒子水平方向40%的位置
　　50%指:背景圖在垂直方向50%的位置，對應到該盒子垂直方向50%的位置

background-attachment 背景依附

　　該成員決定背景圖像是否固定或者隨著頁面的其餘部分滾動。

background-attachment:status     //背景依附狀態
status的取值：
　　（1）scroll ：  滾動(預設)，背景圖會隨著頁面其餘部分的滾動而滾動
　　（2）fixed ：　 固定，當頁面的其餘部分滾動時，背景圖不會滾動
　　（3）inherit：  從父元素繼承background-attachment屬性的設置（很少用）

CSS3_背景(background)後傳

CSS3不僅為背景家族新增3位成員，還為背景家族擴展了2個重要的功能。

知識點驛站:

　　CSS3的牽頭人並不是W3C，而是由各大瀏覽器廠商組成的WHATWG組織，後來才被W3C所採納。因此，CSS3的新屬性在被W3C採納前後的書寫有所不同。

　　在被W3C採納之前，如果瀏覽器想支持該屬性，需要加瀏覽器的私有首碼（瀏覽器所採用的內核），以表示這是瀏覽器的私有屬性，並非W3C的官方屬性。因此，在實際工作中，你得這麼寫（以background-origin為例）：

-webkit-background-origin: ;
-moz-background-origin: ;
-ms-background-origin: ;
-o-background-origin: ;  　　//加上瀏覽器私有首碼的寫法
background-origin: ; 　　　　//W3C寫法，必須帶上

（一）家族新成員

　　先來瞧瞧背景家族新增的位成員吧，很帥很靚很神秘：

background-origin 　　背景起源
background-size 　　  背景大小
background-clip 　　  背景裁切

　　接下來，老司機開車時間，請坐好抓好扶手！！

background-origin 背景起源

　　該成員決定了背景圖的定位相對於盒子的哪部分區域而言，通常和background-position聯合使用。

　　預設情況下，背景圖是相對於盒子的內邊距（padding）進行定位的！但是，在css3中規格背景圖還可以相對於盒子的邊框（border）和內容（content）進行定位。

-webkit-background-origin: positionArea ;     //positionArea指定位區域
-moz-background-origin: positionArea ;
-ms-background-origin: positionArea ;
-o-background-origin: positionArea ;
background-origin: positionArea ;
positionArea的取值：
　　（1）padding-box ： 背景圖相對於盒子的內邊距進行定位(預設)
　　（2）border-box :   背景圖相對於盒子的邊框進行定位
　　（3）content-box :  背景圖相對於盒子的內容進行定位

特別說明：

　　a> 該成員從IE9開始支持；
　　b> css中的盒模型組成：content(內容) + padding(內邊距) + border(邊框) + margin(外邊距)；

background-size 背景尺寸

　　該成員決定背景圖的大小，但是，不會改變圖片自身原有的尺寸。

-webkit-background-size: widthSize heightSize ; 　　//（寬度尺寸 高度尺寸）
-moz-background-size: widthSize heightSize ; 
-ms-background-size: widthSize heightSize ;
-o-background-size: widthSize heightSize ;
background-size: widthSize heightSize ;

屬性的取值：

　　（1）預設取值：auto　

background-size: auto auto ; //背景圖會以自身大小呈現

　　（2）像素值：px ……

background-size: 50px 50px ; //背景圖會以指定值呈現

　　（3）百分比：100% ……

background-size: 50% 50% ; //背景圖會以相對於盒子尺寸的百分比大小呈現

　　（4）cover　　　　

background-size:cover ; //縮放背景圖到剛好覆蓋盒子為止

　　（5）contain

background-size:contain ; //在保證顯示完整背景圖的情況下，縮放背景圖到與盒子等寬或等高

最佳實踐：
　　圖片私有特性：只要設置圖片寬高中的任何一個值，圖片就會等比縮放，這樣可以保證圖片不變形不失真；
　　因此，通常利用圖片這一特性，在不知道圖片等比例縮放尺寸的情況下，background-size只給圖片寬高中的任何一個設置值，另外一個設置為auto。

background-clip 背景裁切

　　該成員規定背景（背景圖or背景色）的繪製區域。

-webkit-background-clip : clipArea ; 　　　　//clipArea指繪製區域
-moz-background-clip : clipArea ;
-ms-background-clip : clipArea ;
-o-background-clip : clipArea ;
background-clip : clipArea ;
clipArea的取值：
　　（1）border-box : 　 　背景從盒子邊框開始裁切 （預設）
　　（2）padding-box ：　　背景從盒子內邊距開始裁切
　　（3）content-box : 　　背景從盒子內容開始裁切　

(二)家族擴展功能

　　瞧瞧css3都給背景家族擴展了哪兩個功能！

　　　a> 多個背景圖
　　　b> 背景漸變

　　感覺高大上的樣子，到底是什麼神秘功能，趕緊來一起分析分析！

多個背景圖

　　css3中可以讓一個元素盒子應用一個或多個圖片作為背景，而且多個背景之間用逗號"，"隔開，而且圖片按照書寫順序顯示！

background:url(./images/01.png),url(./images/02.png),url(./images/03.png);

特別說明：

　　a> 從IE9開始支持；
　　b> 不需要加上瀏覽器私有首碼；
　　c> 如果content-box、padding-box和border-box一同設置，需要把content-box寫在最前面，padding-box寫在第二，border-box寫在最後；

background:url(./images/01.png) content-box , url(./images/02.png) padding-box , url(./images/03.png) border-box;

　　註：在這裡content-box、padding-box和border-box，既是background-clip的屬性值，也是background-origin的屬性值；

背景漸變

　　css3中可以讓一個元素盒子設置背景色漸變，而不是單純的只能設置純色作為盒子的背景色或者指定圖片作為盒子的背景！切記這裡的背景漸變是背景色！背景色！不是背景圖！！

（1）線性漸變　　

　　又稱為直線漸變。

background-image:-webkit-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-moz-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-ms-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-o-linear-gradient(startLocal , color1 , color2 , color3); 　//加上瀏覽器私有首碼的寫法
background-image:linear-gradient(startLocal , color1 , color2 , color3); 　　//W3C寫法

color1表示顏色值：

（1）如果後面沒有加上百分比或者像素值：
　　　　a> color1將在起始位置顯示；
　　　　b> color3將在最後位置顯示；
　　　　c> color2將在中間等分點顯示；
（2）如果後面加上百分比或者像素值，表示給顏色將在盒子的該位置顯示；　

startLocal表示起始位置，可取值：

　　（1）方位名詞：

top: 從上到下漸變(預設) 　　    (等價於to bottom)
left:從左到右漸變 　　　　　　  (等價於to right)
right:從右到左漸變 　　　　　　 (等價於to left)
bottom:從下到上漸變 　　　　　　(等價於to top)
top left:從左上角開始漸變

　　（2）度數degree:
　　　　在背景漸變中，W3C和WHATWG的標準不一樣：數軸不一樣，起始位置不同，旋轉方向不同。因此，度數是不一樣的！具體：

　　　　　　a> W3C中，0deg是在X軸（水平方向）的左邊，順時針旋轉；
　　　　　　b> WHATWG中，0deg是在Y軸（垂直方向）的下方，逆時針旋轉；

　　　　　　

background-image:-webkit-linear-gradient(270deg, red, blue);
background-image:-moz-linear-gradient(270deg, red, blue);
background-image:-ms-linear-gradient(270deg, red, blue);
background-image:-o-linear-gradient(270deg, red, blue);
background-image:linear-gradient(180deg, red, blue); 　　　　/*deg 表示degree 度數*/

特別地，W3C不支持方位名詞的寫法，但是支持度數的寫法

（2）徑向漸變

　　又稱圓心漸變

background-image:-webkit-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-moz-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-ms-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-o-radial-gradient(start_X start_Y , color1 , color2 , color3); 　//加上瀏覽器私有首碼的寫法
background-image:radial-gradient(start_X start_Y , color1 , color2 , color3); 　　　//W3C寫法

說明：徑向漸變的起始位置的取值不支持度數的寫法！

背景(background)後遺症

（一）背景(background)綜合體

　　在css中，可以用background複合屬性在一個聲明中設置所有的背景屬性（包括css3新增屬性），而不用單獨去寫某個背景屬性，可以設置的背景屬性：

background-color 
background-position 
background-repeat 
background-attachment 
background-image
background-origin 
background-size 
background-clip

　　是不是感覺很牛逼，但是這裡幾個坑，值得我們註意！

（1）通常所說的background複合屬性，是針對CSS2中5個背景屬性而言，不包含CSS3中新增3個背景屬性！

background: background-image background-repeat background-position background-attachment background-color ；

　　　　a> 不存在嚴格意義上的書寫順序（上面是老司機的書寫順序）；
　　　　b> 如果某個屬性沒有書寫，那麼將自動採用預設值；

　那麼background複合屬性，為啥不包含CSS3中的3個屬性呢？理由有下：

a> css2中的背景屬性，已經得到各大瀏覽器支持，不存在相容性，不需要寫瀏覽器私有首碼！

b> css3中新增背景屬性，存在一定相容性，且需要帶上各大瀏覽器的私有首碼才能得到支持！

（2）還記得CSS3給背景家族新增加多個背景圖的功能麽，該功能也是以background開頭！

　　那麼問題來了!

　　如果在一個元素中我們既要用background複合屬性來簡寫CSS2的背景屬性，又要添加多個背景圖，怎麼辦？

a> 優先用background複合屬性添加多個背景圖；

b> 背景屬性只能單獨寫，不能用background複合屬性來簡寫!

c> 單獨寫的背景屬性，必須寫在background複合屬性的後面！

　　肯定又有同學要問，為什麼單獨背景屬性必須寫在background複合屬性之後?

css三大特性之層疊性!熟悉麽？長江後浪推前浪，前浪死在沙灘上！

（二）關於background-image屬性

　　這個家族成員比較牛逼，當然也比較複雜！

（1）可以覆蓋多個背景圖的background複合屬性！

在同一個元素中：

　　將導致多個背景圖效果失效

div{
　　width:300px;
　　height:300px;
　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box; 
　　background-image:url(images/30/ab.png);
}

在嵌套的父子級元素中：

　　a> 如果子元素的背景圖尺寸小於父元素的尺寸，那麼父元素的多個背景圖效果的多餘部分會顯示出來！
　　b> 如果子元素的背景圖尺寸大於等於父元素的尺寸，那麼父元素的多個背景圖效果會被覆蓋！

div{
　　width:300px;
　　height:300px;
　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box;
}
div span{
　　display: block;
　　width:300px;
　　height:300px;
　　background-image: url(images/02.jpg);
}

（2）背景漸變與背景圖共用background-image屬性！

　　a> 在同一元素中，兩者不能共存，誰在前面，誰先死;
　　b> 在嵌套的父子級元素中，子元素的樣式只會覆蓋父元素的樣式;

（三）插入圖片與背景圖的區別

　　（1）插入圖片占位；背景圖不占位

　　（2）插入圖片語義高，可以被搜索引擎收錄到；背景圖語義低，不可以被搜索引擎搜錄到

　　（3）插入圖片不容易定位；背景圖容易定位，因為有background-position屬性

　　（4）插入圖片不可以用精靈圖；背景圖可以用精靈圖

　　（5）插入圖片有一個bug，下方帶縫隙

（四）最佳實踐

　　（1）在同一個元素中，background複合屬性寫在前面，單獨需要設置的背景屬性寫最後面；
　　　　　　理由：長江前浪推後浪，前浪死在沙灘上

　　（2）在同一元素中添加了多個背景圖，其他背景屬性只能單獨寫，不能在用複合屬性簡寫；     

　　（3）在嵌套的父子級元素中，不建議寫同名屬性
　　　　　　理由：在子元素尺寸大於等於父元素尺寸的情況下，父元素的樣式會被子元素覆蓋；

　　（4）在實際工作中，多用背景圖，少用插入圖片；

 

本文屬於自己在學習之後的總結分享，希望對你的學習能提供一定的幫助！若有錯誤之處，還請望多多指教，本人將在第一時間做出矯正！thank you ！！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux內核啟動過程概述
    版權聲明：本文原創，轉載需聲明作者ID和原文鏈接地址。 Hi!大家好，我是CrazyCatJack。今天給大家帶來的是Linux內核啟動過程概述。希望能夠幫助大家更好的理解Linux內核的啟動，並且創造出自己的內核^_^ Linux的啟動代碼真的挺大，從彙編到C，從Makefile到LDS文件，需要 ...
  • 位元組序（Endianness）、大端（big-endian）、小端（little-endian）
    常見的位元組序（Endianness）主要有大端（big-endian）和小端（little-endian）兩種。big-endian **大**在高位元組（most significant byte）放在記憶體的低地址，little-endian **小**在低位元組（least significant ... ...
  • 存儲層次（Memory hierarchy）、寄存器（Register）、緩存（Cache）
    隨著**CPU速度**的不斷提高和**軟體規模**的不斷擴大，人們當然希望存儲器能同時滿足**速度快、容量大、價格低**的要求。但實際上這一點很難辦到，解決這一問題的較好方法是設計一個**快慢搭配**、具有層次結構的存儲系統。 ...
  • Git個大平臺（win／Linux／Mac）圖形化界面客戶端大彙總
    摘要: 介紹各平臺下的圖形化界面git客戶端（本人並沒有全部使用過），歡迎大家補充新的軟體或者使用感受~ 一、TortoiseGit - The coolest Interface to Git Version Control TortoiseGit 是 TortoiseSVN 的 Git 版本，T ...
  • Apache與Nginx的優缺點比較
    1、nginx相對於apache的優點： 輕量級，同樣起web 服務，比apache 占用更少的記憶體及資源 抗併發，nginx 處理請求是非同步非阻塞的，而apache 則是阻塞型的，在高併發下nginx 能保持低資源低消耗高性能 高度模塊化的設計，編寫模塊相對簡單 社區活躍，各種高性能模塊出品迅速啊 ...
  • windows下redis安裝
    最近因公司項目原因，去了趟昆明出差，其中第一次接觸安裝redis，配置sentinel，學習到不少，但也都是皮毛而已，本隨筆記下所學知識。 1、首先介紹下redis，來源自百度百科 redis是一個key-value存儲系統。和Memcached類似，它支持存儲的value類型相對更多，包括stri ...
  • 太極旋轉-JS實現
    剛學了js的一些函數，所以做了一個太極的旋轉。做完之後是上面這個樣子的，是可以旋轉的。 思路： 1.先做一個基準轉盤，之後將元素都放在轉盤上，跟隨轉盤動。 2.畫兩個半圓，主要屬性是border-top-right-radius: 250px; 像素值為長邊的一半。 3.然後畫4個圓，以基準轉盤為父 ...
  • JavaScript組成、引入、輸出、運算符，基礎知識
    JavaScript組成： ECMAscript 瀏覽器對象模型 BOM 文檔對象模型 DOM // ecmascript bom dom dom （文檔對象模型） 用來訪問和操縱html文檔 bom （瀏覽器對象模型） js 是瀏覽器語言 JavaScript引入： 1 <script src=“ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類