版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54709033
background-color 背景颜色
可以用padding指定颜色的边距
<html>
<head>
<style text/css">
.s1{
background-color:red;
}
.s2{
background-color:blue;
padding:20px;
}
.s3{
background-color:yellow;
}
</style>
</head>
<body class="s3">
<p class="s1">红色的段落</p>
<p class="s2">蓝色的段落,20px的外边距</p>
</body>
</html>
background-image 背景图片
background-image:url(路径)
<html>
<head>
<style type="text/css">
.s1{
background-image:url("素材/1.png");
}
</style>
</head>
<body class="s1">
</body>
</html>
background-repeat 重复
repeat 全部重复
repeat-x 沿着x重复
repeat-y 沿着y重复
no-repeat
background-position 背景定位
top 上
bottom 下
left 左
right 右
center 中间
用数值表示位置:mpx npx(x,y)
用百分数表示
位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。
<!--表示图片位置在水平2/3,竖直1/3处-->
.s1{
background-image:url("素材/1.png");
background-repeat:no-repeat;
background-position: 66% 33%;
}
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
当background-attachment 的值为fixed时,随着页面的滚动图片的位置不会改变