A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不二晨 金牌黑马   /  2019-1-18 09:57  /  480 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值:
                该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
                top left 左上
                bottom right 右下
                如果只给出一个值,则第二个值默认是center
1
2
3
4
5
6
7
也可以直接指定两个偏移量
                第一个值是水平偏移量
                                - 如果指定的是一个正值,则图片会向右移动指定的像素
                                - 如果指定的是一个负值,则图片会向左移动指定的像素
                第二个是垂直偏移量
                                - 如果指定的是一个正值,则图片会向下移动指定的像素
                                - 如果指定的是一个负值,则图片会向上移动指定的像素
1
2
3
4
5
6
7
background-attachment用来设置背景图片是否随页面一起滚动
        可选值:
                        scroll,默认值,背景图片随着窗口滚动
                        fixed,背景图片会固定在某一位置,不随页面滚动
                不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
1
2
3
4
5
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>背景偏移与定位</title>
        <style type="text/css">
                *{
                        margin: 0;
                        padding: 0;
                }
                .box1{
                        /*width: 500px;*/
                        height: 500px;
                        margin: 0 auto;
                        /*设置一个背景颜色*/
                        background-color: #bfa;
                        /*设置一个背景图片*/
                        background-image: url(img/4.png);
                        /*设置图片不重复*/
                        background-repeat: no-repeat;
                        /*
                        背景图片默认是贴着元素的左上角显示
                        通过background-position可以调整背景图片在元素中的位置
                        可选值:
                                该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
                                top left 左上
                                bottom right 右下
                                如果只给出一个值,则第二个值默认是center
                        也可以直接指定两个偏移量
                                第一个值是水平偏移量
                                        - 如果指定的是一个正值,则图片会向右移动指定的像素
                                        - 如果指定的是一个负值,则图片会向左移动指定的像素
                                第二个是垂直偏移量
                                        - 如果指定的是一个正值,则图片会向下移动指定的像素
                                        - 如果指定的是一个负值,则图片会向上移动指定的像素
                        */
                        /*background-position: -50px -50px;*/
                        background-attachment: fixed;
                }
                body{
                        height: 5000px;
                        background-image: url(img/3.png);
                        background-repeat: no-repeat;
                        /*
                        background-attachment用来设置背景图片是否随页面一起滚动
                        可选值:
                                scroll,默认值,背景图片随着窗口滚动
                                fixed,背景图片会固定在某一位置,不随页面滚动
                        不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
                        */
                        background-attachment: fixed;
                }
        </style>
</head>
<body>
        <div class="box1"></div>
</body>
</html>
---------------------
【转载,仅作分享,侵删】
作者:YRyr.*
原文:https://blog.csdn.net/weixin_43152725/article/details/85535543


2 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马