背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
1.inherit:从父元素继承属性设置
2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
no-repeat:取消默认平铺
repeat-x:横向平铺
repeat-y:纵向平铺
3.background-size:尺寸
px、百分比:依旧默认平铺元素
cover:等比放大覆盖元素
contain:等比放大,直到图片的一边达到元素的边框
4.background-attachment:固定
scroll:图片随滚动条滚动而上下移动
fixed:图片固定在元素中不会随滚动条移动
----由于需要动态设置可以查看代码自己试验
5.background-position:定位
方式1：
(+:取值为正单位:px)
x:水平偏移+右边-左边
y:垂直偏移+下-上
----background-position:25px50px;
方式2：
(以元素边框的左右为基准)
xleftrightcenter
ytopbottomcenter
----background-position:lefttop;
----background-position:center；
(需要注意一点的是，除了设置背景图的固定以外，在设置背景图片的尺寸与定位时，若不取消图片的默认平铺，此时依然会对元素进行背景平铺)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>背景图</title>
<!--背景图：
1.inherit:从父元素继承属性设置
2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
no-repeat:取消默认平铺
repeat-x:横向平铺
repeat-y:纵向平铺
3.background-size:尺寸
px、百分比:依旧默认平铺元素
cover:等比放大覆盖元素
contain:等比放大,知道图片的一边达到元素的边框
4.background-attachment:固定
scroll:图片随滚动条滚动而上下移动
fixed:图片固定在元素中不会随滚动条移动
5.background-position:定位
方式1：
(+:取值为正单位:px)
x:水平偏移+右边-左边
y:垂直偏移+下-上
方式2：
(以元素边框的左右为基准)
xleftrightcenter
ytopbottomcenter
-->
<style>
.boxrepeat,.boxsize,.boxattachment,.boxposition{
width:300px;
height:400px;
border:1pxsolid#000000;
/*图片可更改*/
background-image:url(img/shoucang.png);
/*从父元素继承属性的设置*/
background-repeat-x:inherit;
}
.boxrepeat{
/*取消默认平铺*/
background-repeat:no-repeat;
/*横向平铺*/
background-repeat:repeat-x;
/*纵向平铺*/
background-repeat:repeat-y;
}
.boxsize{
/*背景图片的尺寸:px、百分比--依旧会默认平铺元素*/
background-size:30px;
background-size:50%;
/*图片的覆盖cover--等比放大覆盖整个元素*/
background-size:cover;
/*背景图片的包含contain--在取消默认平铺的情况下，将图片等比放大直到图片的一边到达元素的边框*/
background-repeat:no-repeat;
background-size:contain;
}
.boxattachment{
/*图片的固定--scroll:随着页面其余部分的的滚动而移动*/
background-attachment:scroll;
/*图片的固定--fixed背景不会随着滚轮移动但是元素会移动并且对图片进行一部分的覆盖*/
background-attachment:fixed;
}
.boxposition{
/*背景图片的定位--x:lefty:top位于左边顶部*/
background-repeat:no-repeat;
/*background-position:lefttop;*/
/*背景图片的定位--x:25pxy:50px向右偏移25px向下偏移50px*/
background-position:25px50px;
background-position:rightbottom;
/*背景图片的定位--center居中*/
background-position:center;
}
</style>
</head>
<body>
<divclass="boxrepeat"></div>
<divclass="boxsize"></div>
<divclass="boxattachment"></div>
<divclass="boxposition"></div>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html