css背景
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css背景</title>
<style>
/* <!-- 通过css背景属性，可以给页面元素添加背景样式 --> */
/* <!-- 背景属性可以设置颜色，背景图片，背景平铺，背景图片位置，背景图像固定等 */
/*背景颜色 background-color:颜色值; */
/* 一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色 */
div {
width: 400px;
height: 400px;
background-color: 颜色值;
}
/* 2.5.2背景图片 */
/* background-image属性描述了元素的背景图像实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，
优点是非常便于控制位置（精灵图也是一种运用场景） */
/* 利用back...position属性可以改变图片再背景中的位置 */
div {
background-image: none/url(../songyangjie/1.1img.jpg);
}
div {
/* background-position: x(方位名词) y(精确单位); */
background-position: center top;
/* background-position: top center; */
}
/* 参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 一致
如果水平靠右侧对齐，第二个参数省略y轴是垂直居中显示的（也就是省略的那个值默认居中对齐）*/
/* 2.5.3背景图像固定 */
p {
background-attachment: scroll/fixed;
/* scroll背景图像随对象内容移动 */
/* fixed背景图像固定 */
}
/* 2,5,4背景属性复合写法 */
p {
background: black url(../songyangjie/1.1img.jpg) no-repeat fixed center top;
/* 这样的一个简写模式 背景颜色，背景图片地址，背景平铺 背景图像滚动 背景图片放的位置 */
}
/* 2.5.5背景色半透明 */
p {
background: rgba(red, green, blue, alpha);
/* rgba r=red g=green b=blue 如果agb都为0那么就是一个纯黑色a=就是透明度 */
/* 最后一个是透明度 alpha 取值范围再0-1之间 */
/* 这是css新增属性，是IE9+以上版本浏览器才支持 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）