HTML&CSS基础-背景相关设置
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.背景颜色设置
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景相关设置</title> <style type="text/css"> .box1{ width: 500px; height: 500px; /*设置背景颜色*/ background-color: deeppink; /*设置居中*/ margin: 0 auto; } </style> </head> <body> <div class="box1"></div> </body> </html>
2>.浏览器打开以上代码渲染结果
二.背景图片设置
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景相关设置</title> <style type="text/css"> .box1{ width: 1920px; height: 1080px; /*设置居中*/ margin: 0 auto; /** * 使用background-image属性来设置背景图片： * 语法: * background-image: url(相对路径) * * background-image使用注意事项: * 1>.如果背景图片大于元素，默认会显示图片的左上角; * 2>.如果背景图片和元素一样大，则会将背景图片全部显示; * 3>.如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素; * */ background-image: url(img/01.jpg); /** * 可以同时设置为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。 * 一般情况下，设置背景图片时都会同时指定一个背景颜色，因为用户在访问网站时可能不能立即加载图片(因为浏览器需要下载图片)，这样用户起码还能看到背景颜色。 */ background-color: deeppink; /** * background-repeat可用于设置背景图片的重复方式,有以下可选值: * repeat: * 默认值，当图片小于元素大小时，会默认以水平，垂直方向重复(平铺)以充满元素。 * no-repeat: * 当图片小于元素大小时，背景图片不会重复，有多大就显示多大。 * repeat-x: * 当图片小于元素大小时，背景图片沿水平方向重复。 * repeat-y: * 当图片小于元素大小时，背景图片沿垂直方向重复。 */ background-repeat: repeat-x; } </style> </head> <body> <div class="box1"></div> </body> </html>
2>.浏览器打开以上代码渲染结果
三.背景图片位置相关配置
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景相关设置</title> <style type="text/css"> .box1{ width: 500px; height: 500px; /*设置居中*/ margin: 0 auto; /*设置背景图片*/ background-image: url(img/02.png); /*设置背景颜色*/ background-color: deeppink; /*设置图片不重复*/ background-repeat: no-repeat; /** * 背景图片默认贴在元素的左上角显示，通过"background-position"可以调整背景图片在元素中的位置。 * * "background-position"属性可以使用top,right,left,bootom,center中的两个值(代表水平方向和垂直方向，如果只写一个值那么第二个值默认是"center"，很有局限性，严格来说就是一个九宫格，因此并不推荐使用)来指定一个背景图片的位置，例如: * top left: * 左上 * bottom right: * 右下 * center center: * 居中 * * "background-position"属性也可以直接指定两个偏移量 * 第一个值是水平方向的偏移量: * 如果指定的是一个正值，则图片会向右移动指定的像素； * 如果指定的是一个负值，则图片会向左移动指定的像素; * * 第二值是垂直方向的偏移量： * 如果指定的是一个正值，则图片会向上移动指定的像素； * 如果指定的是一个负值，则图片会向下移动指定的像素; */ /*background-position: center;*/ background-position: 80px 53px; } body{ background-image: url(img/03.png); background-repeat: no-repeat; height: 5000px; /** * background-attachment用来设置背景图片是否随页面一起滚动，有以下可选值: * scroll: * 默认值，背景图片随着窗口滚动 * fixed: * 背景图片的定位永远相对于浏览器的窗口，即图片不随着窗口滚动 * * * 温馨提示: * 不随窗口滚动的图片,我们一般都是设置给body，而不设置给其它元素 * */ background-attachment: fixed; } </style> </head> <body> <div class="box1"></div> <p> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> <p> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> <p> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> <p> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> <p> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> </body> </html>
2>.浏览器打开以上代码渲染结果
