css15.背景设置

时光无错孤独难谈

于 2020-02-14 14:23:28 发布

阅读量74

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104311691

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                width: 1000px;
                height: 6000px;
                background-color: pink;
                margin: 0 auto;
                /* 
                    使用border-image设置背景图片
                        默认从左上角显示，图片太小平铺
                */
                background-image: url("2.png");
                /* 
                    background-repeat指定图片重复样式
                    可选值：   
                        repeat 默认值，双向和重复
                        no-repeat 不重复
                        repeat-x 水平重复
                        repeat-z 垂直重复

                 */
                 background-repeat: no-repeat;
                 /* 
                    背景图片默认在左上角显示
                    通过background-position可以调整背景图片在元素中位置
                    可选值：
                        top bottom left right center中的两个
                         top left
                         bottom right
                         水平方向一个值，垂直方向一个值
                         如果只给出一个值，第二个值默认center
                    也可以指定两个偏移量 水平 垂直

                  */
                /* background-position: bottom right; */
                background-position: 1000px 50px;
                /* 
                    background-attachment用来设置背景图片是否随页面一起滚动
                    可选值：
                        scroll 默认值，背景图片随窗口滚动
                        fixed 背景图片固定在某一位置
                    不随窗口滚动的图片，一般设置给body
                 */
                background-attachment: fixed;
            }

        
        </style>


    </head>
        
    <body>
        <div class="box1"></div>


    </body>


</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css15.背景设置

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> *{ margin: 0; padding: 0; ...
复制链接

扫一扫

专栏目录