Python 前端开发之CSS Background
【摘要】 CSS 背景设置相关知识。
background
给元素设置padding之后，发现padding的区域背景和content部分的一致。
1、background-color —— 背景颜色
设置背景色：
css:
<style>
.demo{
width: 50px;
height: 100px;
background-color: greenyellow;
}
</style>
html:
<body>
<div class="demo"></div>
</body>
2、background-image —— 背景图片
设置背景图片：
css:
<style>
.demo{
width: 2000px;
height: 1500px;
background-image: url('./images/xxx.jpg');
}
</style>
html:
<body>
<div class="demo"></div>
</body>
那么发现默认的背景图片，水平方向和垂直方向都平铺
背景图片相关配置 ：background-repeat，background-position，background-attach
| background-repeat：设置背景图像的平铺方式 | |
repeat repeat-x repeat-y no-repeate inherit |
默认。背景图像将在垂直方向和水平方向重复 背景图像将在水平方向重复 背景图像将在垂直方向重复 背景图像将仅显示一次 规定应该从父元素继承 background-repeat 属性的设置 |
| background-position：设置背景图像的起始位置 | |
垂直位置 水平位置
|
可以从两个纬度上设定关键词：上中下 左中右 垂直位置：top center bottom 水平位置：left center right 如仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一起。 |
| background-attachment：设置固定的背景图像 | |
scroll fixed inherit |
默认值。背景图像会随着页面其余部分的滚动而移动。 当页面的其余部分滚动时，背景图像不会移动。 规定应该从父元素继承 background-attachment 属性的设置。 |
滚动背景图示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动背景图示例</title>
<style>
* {
margin: 0;
}
.box {
height: 500px;
background: url("hulu.jpg") no-repeat center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: rgba(132,0,255,0.2);
}
.d2 {
height: 500px;
background-color: rgba(132,255,255,0.2);
}
.d3 {
height: 500px;
background-color: rgba(0,255,0,0.2);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3、background属性的简写
background：#ffffff url('1.png') no-repeat right top;
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）