srcmini本文概述
CSS background属性用于定义元素的背景效果。有5个CSS背景属性会影响HTML元素：
- 背景颜色
- 背景图片
- 背景重复
- 背景附件
- 背景位置
1）CSS背景色
background-color属性用于指定元素的背景色。
你可以像这样设置背景颜色：
<!DOCTYPE html>
<html>
<head>
<style>
h2, p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello srcmini. This is an example of CSS background-color.</p>
</body>
</html>输出：
我的第一个CSS页面。
你好srcmini。这是CSS background-color的示例。
2）CSS背景图片
background-image属性用于将图像设置为元素的背景。默认情况下, 图像覆盖整个元素。你可以像这样设置页面的背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello srcmini02.com</h1>
</body>
</html>注意：应根据文本颜色选择背景图像。文字和背景图片的组合不好可能是导致网页设计不良和可读性下降的原因。
3）CSS背景重复
默认情况下, 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 srcmini02.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 srcmini02.com</h1>
</body>
</html>4）CSS背景附加
background-attachment属性用于指定背景图像是固定的还是在浏览器窗口中与页面的其余部分一起滚动。如果将背景图像设置为固定, 则在浏览器中滚动时图像将不会移动。让我们以固定背景图像为例。
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;5）CSS背景位置
background-position属性用于定义背景图像的初始位置。默认情况下, 背景图像位于网页的左上方。
你可以设置以下位置：
- 中央
- 最佳
- 底部
- 剩下
- 对
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
评论前必须登录！
注册