- 您好！欢迎来到鲲鹏知舟
CSS Background背景
CSS background 属性用于定义元素的背景效果。有 5 个 CSS 背景属性会影响 HTML 元素：
背景颜色
背景图片
背景重复
背景附件
背景位置
1) CSS 背景色
background-color 属性用于指定元素的背景颜色。
您可以像这样设置背景颜色：
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello RocSchool. This is an example of CSS background-color.</p>
</body>
</html>输出：
我的第一个 CSS 页面。
你好Javatpoint。这是 CSS 背景色的示例。
2) CSS 背景图片
background-image 属性用于将图像设置为元素的背景。默认情况下，图像覆盖整个元素。您可以为这样的页面设置背景图像。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello RocSchool.com</h1>
</body>
</html>注意：背景图片应根据文字颜色选择。文本和背景图像的不良组合可能是导致网页设计不佳且不可读的原因。
3) CSS 背景重复
默认情况下， background-image 属性在水平和垂直方向上重复背景图像。某些图像仅在水平或垂直方向重复。
如果图像仅水平重复，背景看起来会更好。
背景重复：重复-x；
背景重复：重复-y；
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello RocSchool.com</h1>
</body>
</html>4) CSS 背景附件
background-attachment 属性用于指定背景图像是固定的还是随浏览器窗口中页面的其余部分滚动。如果您设置固定背景图像，则在浏览器中滚动期间图像将不会移动。让我们以固定背景图像为例。
例子 (Example)
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;5) CSS 背景位置
background-position 属性用于定义背景图像的初始位置。默认情况下，背景图片位于网页的左上角。
您可以设置以下位置：
center
top
bottom
left
right
例子 (Example)
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;-
使用社交账号登录,本站支持
全部评论(0)