一、CSS 背景属性简介
CSS 背景属性用于设置HTML元素的背景内容（颜色或图片）
CSS 背景属性主要包括：
（1）、background-color 设置背景颜色
（2）、background-image 设置背景图片
（3）、background-repeat 设置背景图片重复方式
（4）、background-attachment 设置背景是否随页面滚动
（5）、background-position 设置背景图片位置
二、CSS 背景颜色
<html>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body { background-color: gray; }
.box { line-height: 50px; color: #FFFFFF; background-color: blue; } </style>
<body>
<div class="box">背景颜色</div>
</body>
</html>
三、CSS 背景图片（background-image 通常配合 background-repeat 一同使用）
background-image: url(‘bg.png’)
background-repeat : repeat
（纵向重复背景图片 repeat-x）：
<html>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
body { background-image: url(‘bg.png’); background-repeat: repeat-x; } </style>
<body>
<div>背景图片</div>
</body>
</html>
纵向重复背景图片 repeat-y
<html>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
body { background-image: url(‘bg.png’); background-repeat: repeat-y; } </style>
<body>
<div>背景图片</div>
</body>
</html>
四、CSS 背景图片位置
<html>
<meta charset="UTF-8">
title>背景图片位置</title>
<style type="text/css">
body { background-image: url(‘bg.png’); background-repeat: no-repeat; background-position: right top; /*右上角*/ }
</style>
<body>
<div>背景图片位置</div>
</body>
</html>
位置的可选值：left top； left center； left bottom； right top； right center ；right bottom； center top ；center center ；center bottom......
五、CSS 背景简写
<html>
<meta charset="UTF-8">
<title>背景属性</title>
<style type="text/css">
body { background-color: gray; background-image: url(‘bg.png’); background-repeat: no-repeat; background-position: right top; }
</style>
<body>
<div>背景图片属性简写</div>
</body>
</html>
可以简写成：
<html>
<meta charset="UTF-8">
<title>背景属性</title>
<style type="text/css">
body { background: gray url(‘bg.png’) no-repeat right top; }
</style>
<body>
<div>背景图片属性简写</div>
</body>
</html>
扫一扫
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
