css3新增背景屬性background

css3新增屬性🔑

• 邊框屬性
• 背景屬性
• 文字屬性
• 顏色屬性

 背景屬性🔨

屬性	說明
background-image	添加背景圖片
background-size	指定背景圖像的大小
background-origin	指定背景圖像的位置區域
background-clip	指定位置開始裁剪背景圖

 

 

 

 

 

 

 

 

1. background-image（背景圖片）💡

 CSS3中可以通過background-image屬性添加背景圖片

語法：background-image：url('圖片地址')

注意：不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif); /*背景圖*/
    background-position: right bottom, left top; /*背景圖位置*/
    background-repeat: no-repeat, repeat; /*背景是否平鋪*/
}

另外，還可以給不同的圖片設置多個不同的屬性：

#example1 {
   /*這時直接使用復合屬性background*/
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2. background-size（背景大小）💡

background-size指定背景圖像的大小

CSS3以前，背景圖像大小由圖像的實際大小決定

CSS3中可以在不同的環境中指定背景圖片的大小，單位可以是像素比也可以是百分比大小

注意：你指定的大小是相對於父元素的寬度和高度的百分比的大小，不能為負值！

單張圖片的背景大小可以使用以下三種方法中的一種來規定：

• 使用關鍵詞 contain：等比例縮放，直到有一條邊碰到盒子邊框就停止

• 使用關鍵詞 cover：等比例縮放，填充覆蓋整個盒子

• 設定寬度和高度值

當通過寬度和高度值來設定尺寸時，你可以提供一或者兩個數值:

• 如果僅有一個數值被給定，這個數值將作為寬度值大小，高度值將被設定為auto。
• 如果有兩個數值被給定，第一個將作為寬度值大小，第二個作為高度值大小。

示例值：

div{
    /* 關鍵字 */
    background-size: cover
    background-size: contain

    /* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */
    background-size: 50%
    background-size: 3em
    background-size: 12px
    background-size: auto

    /* 兩個值 */
    /* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
    background-size: 50% auto
    background-size: 3em 25%
    background-size: auto 6px
    background-size: auto auto

    /* 逗號分隔的多個值：設置多重背景 */
    background-size: auto, auto     /* 不同於background-size: auto auto */
    background-size: 50%, 25%, 25%
    background-size: 6px, auto, contain

    /* 全局屬性 */
    background-size: inherit;
    background-size: initial;
    background-size: unset;
}

伸展背景圖像完全填充內容區域:

div{
    background:url(img_flwr.gif);
    background-size:100% 100%; /*填充整個內容區域*/
    background-repeat:no-repeat;
}

背景圖片大小計算：

（1）如果指定了 background-size 的兩個值並且不是auto：

　　背景圖片按指定大小渲染。

（2）contain 或 cover:

　　保留固有比例，最大的包含或覆蓋背景區。如果圖像沒有固有比例，則按背景區大小。

（3）auto 或 auto auto:

　　圖像如果有兩個長度，則按這個尺寸。如果沒有固有尺寸與固有比例，則按背景區的大小。如果沒有固有尺寸但是有固有比例， 效果同 contain。如果有一個長度與比例，則由此長度與比例計算大小。如果有一個長度但是沒有比例，則使用此長度與背景區相應的長度。

（4）一個為 auto 另一個不是auto:

　　如果圖像有固有比例，則指定的長度使用指定值，未指定的長度由指定值與固有比例計算。如果圖像沒有固有比例，則指定的長度使用指定值，未指定的長度使用圖像相應的固有長度，若沒有固有長度，則使用背景區相應的長度。

注意規范：

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* 不推薦 */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* 可行 */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

3.background-origin（背景起始位置）💡

background-origin 規定了指定背景圖片background-image屬性的原點位置的背景相對區域

注意：當使用 background-attachment為fixed時，該屬性將被忽略不起作用

語法：

background-origin : border-box | padding-box | content-box

• padding-box ：從padding區域開始顯示(默認值)

• content-box ：從內容區域開始顯示，不計算padding部分

• border-box ：從邊框左上角區域開始顯示

.example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* 背景將在內容區padding內部填充 */
   background-origin: content-box;
   /* 背景將從邊框左上角區域開始填充 */
   background-origin: border-box;
}

4.background-clip（背景裁剪）💡

background-clip  設置元素的背景（背景圖片或顏色）是否延伸到邊框、內邊距盒子、內容盒子下面

取值：

div{
    /* Keyword values */
    background-clip: border-box;
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;

/* Global values */
    background-clip: inherit;
    background-clip: initial;
    background-clip: unset;  
}

• padding-box ：裁剪到padding部分，顯示內邊距、內容區部分圖片

• content-box ：裁剪到內容區，只保留內容區部分圖片

• border-box ：裁剪到邊框區，顯示內容區、內邊距和邊框部分圖片

background（復合屬性）🔺

background 是一種css簡寫屬性，用於一次性集中定義各種背景屬性，，包括 color, image, origin 與 size, repeat 方式等等

語法縮寫：

div{
    background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...  
}

可以把上面的縮寫拆解成以下形式：

div{
   background-image:url1,url2,...,urlN;
   background-repeat : repeat1,repeat2,...,repeatN;
   backround-position : position1,position2,...,positionN;
   background-size : size1,size2,...,sizeN;
   background-attachment : 
   attachment1,attachment2,...,attachmentN;
   background-clip : clip1,clip2,...,clipN;
   background-origin : origin1,origin2,...,originN;
   background-color : color;
}

注意🧨

•  用逗號隔開每組 background 的縮寫值；
•  如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
•  如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
•  background-color 只能設置一個。

擴展：常用背景圖片格式！

• .jpg 不支持動畫，不支持透明，漸進顯示，顏色豐富，有損

• .png 不支持動畫，支持透明度，顏色更豐富，無損

• .gif 支持動畫，256種顏色，2種透明度，漸進顯示

• .webp 支持動畫，高壓縮率，高加載速率

以上就是當前所整理的css3中新增的背景屬性，若整理有誤或不完善請各位大佬指出~