-
背景色
1.屬性background-color定義元素的背景色;
2.背景色默認值為transparent,即透明的;
3.此屬性可為任何元素設置背景色.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>標題1</h1>
<p style="background-color: yellowgreen;">段落</p>
<h2>標題2</h2>
<a href="www.reibang.com" style="background-color: #f000ef;">簡書</a>
<p style="background-color: rgb(200,66,87);">段落1</p>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.背景色可用于塊狀元素已經(jīng)行內元素;
2.顏色的值可為 文字/十六進制/三原色 等多種方式設置.
運行圖片
-
背景圖片
1.屬性background-image定義元素的背景圖片;
2.背景圖片默認值為none,即無背景圖片;
3.大部分背景圖片應用于body元素,但不限于此,其他元素如段落,鏈接等均可使用此屬性.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-image: url(001.jpg);
}
</style>
</head>
<body>
<a href="www.reibang.com" style="background-image: url(HBuilder.png);">簡書</a>
<div id="D01" style="background-image: url(HBuilder.png);">
<span>01</span>
</div>
<span style="background-image: url(HBuilder.png);">02</span>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.圖像的和顏色一樣,其范圍大小根據(jù)元素的范圍大小而定,如塊元素和行內元素的展示情況所示;
2.默認重復模式為平鋪模式.
運行圖片
- 背景重復
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: green;
background-image: url(003.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.背景重復的方式有no-repeat,repeat-x,repeat-y;
2.no-repeat:不重復;
3.repeat-x:在x方向重復;
4.repeat-y:在y方向重復;
no-repeat
repeat-x
repeat-y
- 背景定位
1.關鍵字定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: green;
background-image: url(003.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.圖片位置有center,top,bottom,left,right等值;
2.圖片位置的center為圖片的中心點,位于元素的起始線的中點上;
3.其中方向是可以組合使用的,例如:right top等;
4.left,right和left center/center left,right center/center right是等價的
5.圖片位置默認為left top/top left.
center
top
bottom
left
right
2.百分比定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: green;
background-image: url(003.jpg);
background-repeat: no-repeat;
background-position: 33% 0%;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.第一個百分比為中心點距x方向的距離比;
2.第二個百分比為中心點距y方向的距離比.
示例圖片
3.像素定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: green;
background-image: url(003.jpg);
background-repeat: no-repeat;
background-position: 80px 50px;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.第一個像素是距離x方向的像素值;
2.第二個像素是距離y方向的像素值.
示例圖片
- 背景關聯(lián)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: green;
background-image: url(003.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
#D03,#D05{
background-color: purple;
}
#D04{
background-color: goldenrod;
}
</style>
</head>
<body>
<div id="D01" style="padding: 100px;">
<span>01</span>
</div>
<div id="D02" style="padding: 100px;">
<span>01</span>
</div>
<div id="D03" style="padding: 100px;">
<span>01</span>
</div>
<div id="D04" style="padding: 100px;">
<span>01</span>
</div>
<div id="D05" style="padding: 100px;">
<span>01</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.fixed為固定,背景圖片不隨頁面滾動而滾動;
2.默認為scroll,背景圖片跟隨頁面滾動.
fixed
scroll
-
背景高級語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background: green url(003.jpg) no-repeat scroll left top;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.background屬性,可設置元素的背景色及背景圖片;
2.此合并書寫可簡寫代碼,提高效率,但要注意其順序;
3.background{color image repeat attchment position}
運行圖片
