HTML&CSS基础-背景相关设置

　　　　　　　　　　　　　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>.浏览器打开以上代码渲染结果

posted @ 2018-03-10 22:15 尹正杰阅读(610) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

尹正杰

HTML&CSS基础-背景相关设置

公告