WEB前端开发工程师 学习第二天 背景
1.背景颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 400px; height: 400px; border: 10px solid pink; background-color:red; } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background-color 背景颜色 颜色英文关键字 rgb 十六进制 --> </head> <body> <div> 这是一段文字 <img src="img/1.jpg"/> </div> </body> </html>
2.背景图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 600px; height: 600px; border: 10px solid pink; background-image: url(img/1.jpg); } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background-image 背景图 背景图默认铺满整个容器大小 --> </head> <body> <div> <!--这是一段文字 <img src="img/1.jpg"/>--> </div> </body> </html>
3.背景图平铺
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 600px; height: 600px; border: 10px solid pink; background-image: url(img/1.jpg); /*background-repeat: no-repeat;*/ background-repeat: no-repeat; } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background-repeat 背景图是否重复 no-repeat 不重复 repeat-x x轴重复 repeat-y y轴重复 repeat x/y都重复 --> </head> <body> <div> <!--这是一段文字 <img src="img/1.jpg"/>--> </div> </body> </html>
4.背景图位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 600px; height: 600px; border: 10px solid pink; background-image: url(img/1.jpg); background-repeat: no-repeat; background-position:left ; } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background-position:x y; 背景图位置 具体数值 left right center top bottom center 当第二个属性值没有填写，默认居中。 --> </head> <body> <div> <!--这是一段文字 <img src="img/1.jpg"/>--> </div> </body> </html>
5.背景图是否滚动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 600px; height: 2000px; border: 10px solid pink; background-image: url(img/1.jpg); background-repeat: no-repeat; background-position:left top; background-attachment: scroll; } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background-attachment 背景图是否滚动 fixed 固定在浏览器可视区域 scroll 跟随滚动条滚动 --> </head> <body> <div> <!--这是一段文字 <img src="img/1.jpg"/>--> </div> </body> </html>
6.background复合样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 600px; height: 2000px; border: 10px solid pink; /*background-image: url(img/1.jpg); background-repeat: no-repeat; background-position:left top; background-attachment: scroll;*/ background:red url(img/1.jpg) no-repeat center top scroll; } </style> <!-- 内容是会撑开容器宽高 背景不会占用容器宽高 background 复合样式 不分属性书写顺序的 颜色相关 图片相关 --> </head> <body> <div> <!--这是一段文字 <img src="img/1.jpg"/>--> </div> </body> </html>
