background 屬性

CodeYarn發表於2022-04-16

一、background 屬性集

值 說明
background-color 指定要使用的背景顏色
background-position 指定背景影像的位置
background-size 指定背景圖片的大小
background-repeat 指定如何重複背景影像
background-origin 指定背景影像的定位區域
background-clip 指定背景影像的繪畫區域
background-attachment 設定背景影像是否固定或者隨著頁面的其餘部分滾動。
background-image 指定要使用的一個或多個背景影像

 

二、屬性集詳解

1、background-color 

值 描述
color 指定背景顏色。顏色值有3種寫法：文字、十六進位制、RGB
transparent 指定背景顏色應該是透明的。這是預設 
div{
    background-color:yellow;
}
h1{
    background-color:#00ff00;
}
p{
    background-color:rgb(255,0,255);
}

 

2、 background-position 

值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 如果僅指定一個關鍵字，其他值將會是"center"
x% y% 第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。預設值為：0％0％
xpos ypos 第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是畫素（0px0px）。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions
inherit 指定background-position屬性設定應該從父元素繼承

 

3、background-size

值 描述
length 設定背景圖片高度和寬度。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為 auto(自動)
percentage 將計算相對於背景定位區域的百分比。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為"auto(自動)"
cover 此時會保持影像的縱橫比並將影像縮放成將完全覆蓋背景定位區域的最小大小。
contain 此時會保持影像的縱橫比並將影像縮放成將適合背景定位區域的最大大小。

 

4、background-repeat

值 說明
repeat 背景影像將向垂直和水平方向重複。這是預設
repeat-x 只有水平位置會重複背景影像
repeat-y 只有垂直位置會重複背景影像
no-repeat background-image 不會重複

 

5、background-origin

值 描述
padding-box 背景影像填充框的相對位置
border-box 背景影像邊界框的相對位置
content-box 背景影像的相對位置的內容框

 

6、background-attachment

值 描述
scroll 背景圖片隨著頁面的滾動而滾動，這是預設的。
fixed 背景圖片不會隨著頁面的滾動而滾動。
local 背景圖片會隨著元素內容的滾動而滾動。

 

四、常見背景屬性設定

body{
    background-image:url('圖片地址');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

 

相關文章