您的位置：首页 > Web前端 > CSS

CSS_背景

2017-01-24 17:04 218 查看

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时，随着页面的滚动图片的位置不会改变

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 背景
相关文章推荐
新的分享
章节导航