背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
    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. DBShop 电子商务网店系统

    DBShop 电子商务网店系统,采用业界知名框架 ZendFramework 2 开发而成. 下面为功能简介 1.在线更新:在线系统更新和在线模板安装与更新,简单.方便.快捷,省却了手动更新的繁琐步骤 ...

  2. MFC OnPaint()函数中最先调用CDialog::OnPaint()和最后调用CDialog::OnPaint()的巨大区别

    OnPaint()函数中最先调用CDialog::OnPaint()和最后调用CDialog::OnPaint()的巨大区别,如果没有注意这个问题就会出现无厘头式的绘图问题-- 效果就是出不来!在经过 ...

  3. SimpleDateFormat之后为何多了一年，难道Java API也这么不靠谱？

    这一切的背后到底是机器故障,还是程序的bug? 难道Java API也不靠谱 朋友在我博客上发现一时间明显错误,操作时间怎么会是2016年?在同一个for循环输出到页面的时间,唯独这一个时间不对,整整 ...

  4. 4月份本周超过 10 款最新免费 jQuery 插件

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  5. DIY Delphi 半透明窗体(2)

    写文章的时候 脑子有点乱 unit uMainForm; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics ...

  6. 由Qmake.exe/QtCreator.exe启动速度慢挖进去（非常有趣的调试过程，作者态度不错，而且关闭Welcome插件也是常见办法）

    一直用Qt Creator开发Qt程序,Nokia的Qt Creator实在太慢了,启动慢,编译速度也是超级慢.昨天,终于它慢的让我无法忍受了,我决定抛开手上的一切工作,深入挖掘Qt Creator启 ...

  7. 虚拟化代码博客 good

    推荐网站和博客地址 --------------------------------   虚拟化代码博客   QEMU大牛博客:qemu - 韋任的維基百科 http://people.cs.nctu ...

  8. 管道Demo

    使用管道实现读取DOS命令结果,界面如下: 主要代码如下: UpdateData(TRUE); //创建一个管道,用于接收命令执行结果 SECURITY_ATTRIBUTES sa; ZeroMemo ...

  9. Spring如何解决循环引用

    概念 什么是循环引用? 故名思义,多个对象形成环路. 有哪几种循环引用? 在Spring中存在如下几种循环引用,一一举例分析一下 注入循环引用(Set注入 注解注入) package c.q.m; i ...

  10. React躬行记（2）——JSX

    JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示.在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必 ...