2 背景图片
3 背景平铺
属性名:background–color
注意:
2 背景图片
属性名:background–image
注意:
3 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
3 背景平铺
属性名:background–repeat
取值:
4 背景位置
属性名:background–position
取值:background–position:水平方向 垂直方向;
水平方向 左(left) 中(center) 右(right)
垂直方向 上(top) 中(center) 下(bottom)
原点(0,0) 盒子的左上角 x轴 y轴
5 背景相关属性连写
属性名:background
连写:background:color image repeat position
注意:
需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
使用:
不经常更换的用背景图
代码:
<!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>Document</title> <style> div { /* 盒子宽800px 高800px */ width: 800px; height: 800px; /* 字体大小 50px */ font-size: 50px; /* 背景色 pink */ /* background-color: pink; */ /* 背景图 1.jpg */ /* background-image: url("images/1.jpg"); */ /* 背景平铺 默认 */ /* background-repeat: no-repeat; */ /* 背景图位置 居中 */ /* background-position: center center; */ /* 连写 颜色 图片 平铺 位置 */ background: pink url("images/1.jpg") no-repeat center; } </style> </head> <body> <div> 背景Demo </div> </body> </html>
效果图:
原文地址:https://blog.csdn.net/weixin_54021642/article/details/131315188
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_20340.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!