背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
    1.inherit:从父元素继承属性设置
    2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
      no-repeat:取消默认平铺

      repeat-x:横向平铺

      repeat-y:纵向平铺

    3.background-size:尺寸
      px、百分比:依旧默认平铺元素

      cover:等比放大覆盖元素

      contain:等比放大,直到图片的一边达到元素的边框

    4.background-attachment:固定
      scroll:图片随滚动条滚动而上下移动

      fixed:图片固定在元素中不会随滚动条移动

----由于需要动态设置可以查看代码自己试验
    5.background-position:定位
      方式1：
      (+:取值为正 单位:px)
      x:水平偏移 + 右边 -左边
      y:垂直偏移 + 下  -上

----background-position:25px 50px;

      方式2：
      (以元素边框的左右为基准)
      x  left  right center
      y   top  bottom center

----background-position:left top;

----background-position:center；

(需要注意一点的是，除了设置背景图的固定以外，在设置背景图片的尺寸与定位时，若不取消图片的默认平铺，此时依然会对元素进行背景平铺)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>背景图</title>

        <!-- 背景图：

                1.inherit:从父元素继承属性设置

                2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):

                        no-repeat:取消默认平铺

                        repeat-x:横向平铺

                        repeat-y:纵向平铺

                3.background-size:尺寸

                        px、百分比:依旧默认平铺元素

                        cover:等比放大覆盖元素

                        contain:等比放大,知道图片的一边达到元素的边框

                4.background-attachment:固定

                        scroll:图片随滚动条滚动而上下移动

                        fixed:图片固定在元素中不会随滚动条移动

                5.background-position:定位

                        方式1：

                        (+:取值为正 单位:px)

                        x:水平偏移 + 右边 -左边

                        y:垂直偏移 + 下  -上

                        方式2：

                        (以元素边框的左右为基准)

                        x  left  right center

                        y   top  bottom center

        -->

        <style>

            .boxrepeat,.boxsize,.boxattachment,.boxposition{

                width: 300px;

                height: 400px;

                border: 1px solid #000000;

                /* 图片可更改 */

                background-image: url(img/shoucang.png);

                /*从父元素继承属性的设置*/

                background-repeat-x:inherit;

            }

            .boxrepeat{

                /*取消默认平铺*/

                background-repeat: no-repeat;

                /* 横向平铺 */

                background-repeat: repeat-x;

                /* 纵向平铺 */

                background-repeat: repeat-y;

            }

            .boxsize{

                /*背景图片的尺寸:px、百分比--依旧会默认平铺元素*/

                background-size: 30px;

                background-size: 50%;

                /*图片的覆盖cover--等比放大覆盖整个元素*/

                background-size: cover;

                /*背景图片的包含contain--在取消默认平铺的情况下，将图片等比放大直到图片的一边到达元素的边框*/

                background-repeat: no-repeat;

                background-size: contain;

            }

            .boxattachment{

                /*图片的固定--scroll:随着页面其余部分的的滚动而移动*/

                background-attachment: scroll;

                /*图片的固定--fixed背景不会随着滚轮移动 但是元素会移动并且对图片进行一部分的覆盖*/

                background-attachment: fixed;

            }

            .boxposition{

                /*背景图片的定位--x:left y:top 位于左边顶部*/

                background-repeat: no-repeat;

                /* background-position: left top; */

                /*背景图片的定位--x:25px y:50px 向右偏移25px 向下偏移50px*/

                background-position:25px 50px;

                background-position: right bottom ;

                /*背景图片的定位--center 居中*/

                background-position: center;

            }

        </style>

    </head>

    <body>

        <div class="boxrepeat"></div>

        <div class="boxsize"></div>

        <div class="boxattachment"></div>

        <div class="boxposition"></div>

    </body>

</html>

 

html+css-->background-img(背景图的设置）的更多相关文章

  1. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  2. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

  3. 前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  4. webpack中，css中打包背景图，路径报错

    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...

  5. 齐博x1背景图如何设置标签

    背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...

  6. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  7. HTML引用CSS实现自适应背景图

    链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...

  8. background:url() 背景图不显示

    奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...

  9. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

随机推荐

  1. Qt 跨UI线程的数据交换和信号-槽调用实现方案汇总

    一.目录 转载1: http://my.oschina.NET/fanhuazi/blog/737224?ref=myread 点击打开链接 转载2: http://www.qtcn.org/bbs/ ...

  2. 分布式文件系统之MooseFS----介绍

    前一段公司因为nfs存储的问题,做了一段时间的调研.最终虽然有nfs高可用方案(nfs+drbd+heartbeat),但是在nfs故障切换的时候会出现 2 分钟左右的延时.这样子...就开始了对分布 ...

  3. QObject提供了QMetaObject元类信息（相当于RTTI和反射），信号与连接，父子关系，调试信息，属性，事件，继承关系，窗口类型，线程属性，时间器，对象名称，国际化

    元类信息(相当于RTTI和反射),信号与连接,父子关系,调试信息,属性,事件,继承关系,窗口类型,线程属性,时间器,对象名称,国际化其中元类又提供了:classInfo,className,构造函数, ...

  4. 获得QQ聊天输入框中的内容

    // 首先得到输入框的句柄.通过spy++这类工具分析,聊天窗体的类名为“#32770”// 但当前系统里不只一个类名为“#32770”的窗体,这就需要全体遍历一次.// 类名为“#32770”标题含 ...

  5. 配置QSslConfiguration让客户端程序跳过本地SSL验证

    大家下午好哦.今天我们在重新制作我们萌梦聊天室的时候,出现了这样的问题.那就是我们的客户端能够对qtdream.com服务器进行登录,但是不能对localhost服务器(也就是本机啦)进行登录.这究竟 ...

  6. vista下开机启动 简单绕过UAC的方法（自己使用runas参数重新启动自己，有点意思）

    背景      vista下,如果不开启UAC,那就没有我下面要说的问题了,呵呵.下面说的都是在vista开启UAC的前提下说的,win7也适用.      在vista下,系统开启了UAC,如果你的 ...

  7. Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释

    一.线程5种状态 新建状态(New) 新创建了一个线程对象. 就绪状态(Runnable) 线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运行,等待获 ...

  8. hadoop之hive&hbase互操作

    大家都知道,hive的SQL操作非常方便,但是查询过程中需要启动MapReduce,无法做到实时响应. hbase是hadoop家族中的分布式数据库,与传统关系数据库不同,它底层采用列存储格式,扩展性 ...

  9. ABP开发框架前后端开发系列---（9）ABP框架的权限控制管理

    在前面两篇随笔<ABP开发框架前后端开发系列---(7)系统审计日志和登录日志的管理>和<ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程>开始 ...

  10. Git 备忘录

    整理了一下工作中常用的 Git 操作,持续更新中...   merge单个文件 例如 B分支想要合并A分支的某个文件 首先,我们切换到B分支  git checkout branch B 之后,我们c ...