CSS背景
CSS背景
CSS背景
CSS背景属性用于定义元素的背景效果。有5个CSS背景属性会影响HTML元素：
background-color
background-image
background-repeat
background-attachment
background-position
1）CSS background-color
background-color属性用于指定元素的背景颜色。
您可以这样设置背景颜色：
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color:#b0d4de;
}
</style>
</head>
<body>
<h2>我的第一个css页面.</h2>
<p>Hello Bianchenghao6. 这是 background-color的例子。</p>
</body>
</html>
输出：
我的第一个CSS页面。
Hello Bianchenghao6。这是CSS background-color的示例。
2）CSS background-image
background-image属性用于将图像设置为元素的背景。默认情况下，图像覆盖整个元素。您可以为这样的页面设置背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Bianchenghao6.com</h1>
</body>
</html>
注意:应根据文本颜色选择背景图像，文字和背景图片的组合不好可能是导致网页设计不佳且无法阅读的原因。
3）CSS background-repeat
默认情况下，background-image属性在水平和垂直方向上重复背景图像。有些图像仅水平或垂直重复。
如果图像仅水平重复，则背景看起来会更好。
背景重复：repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Bianchenghao6.com</h1>
</body>
</html>
背景重复：repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello Bianchenghao6.com</h1>
</body>
</html>
4）CSS background-attachment
background-attachment属性用于指定背景图片是固定的还是在浏览器窗口中与页面的其余部分一起滚动。如果将背景图像设置为固定，则在浏览器中滚动时图像将不会移动。让我们以固定背景图像为例。
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
5）CSS background-position
background-position属性用于定义背景图像的初始位置。默认情况下，背景图像位于网页的左上方。
您可以设置以下位置：
center
top
bottom
left
right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;