-
背景色
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.jianshu.com" style="background-color: #f000ef;">简书</a>
<p style="background-color: rgb(200,66,87);">段落1</p>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.背景色可用于块状元素已经行内元素;
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.jianshu.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.图像的和颜色一样,其范围大小根据元素的范围大小而定,如块元素和行内元素的展示情况所示;
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方向的像素值.
示例图片
- 背景关联
<!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}
运行图片
