背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
    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. Android UI中英文自动显示问题

    最近做了一个项目,其中有个视频和图片需要添加各种水印(日期,地点,经纬度,用户ID,产品ID等)问题,而且水印还要支持中英文自动切换显示.功能设计和实现算是比较顺利.昨天测试部给了一个小Bug,那就是 ...

  2. Android View 滚动边界的测量

    最近一直在用Android TV的RecyclerView,实现视频搜索列表卡片的滚动显示,由于采用了双排滚动,打破了系统默认的单排滚动,且每一屏幕显示10个完整卡片5个半漏边卡片,每个完整卡片的左下 ...

  3. QT中的各种对话框

    大家可以参见QT中各种MessageBox的使用的这篇文章 界面效果图如下,大家可以用代码自己操作 diglog.h #ifndef DIALOG_H #define DIALOG_H #includ ...

  4. c# 可移动可改变大小的控件

    因为业务需要,百度了个可移动可改变大小的控件,然后自己修改了下,功能类似vs的设计面板中的功能差不多,可拖拽,改变大小 拖动的 public class MoveControl { #region 自 ...

  5. Qt - 设置程序界面风格（现成的QMacStyle等等）

    类的继承关系: QMotifStyle:OSF(开放基金协会)开发的一个工业标准的GUI(图形用户接口): QCDEStyle:公共桌面环境(Common Desktop Environment)的缩 ...

  6. 分享android ADT百度云盘下载地址

    由于android官网经常无法打开,特意把最新的android ADT和SDK放到了百度云盘进行了分享,目录中包含Windows和Macbook两种平台的版本,请自行选择: http://pan.ba ...

  7. netcore mvc快速开发系统（菜单，角色，权限[精确到按钮]）开源

    AntMgr https://github.com/yuzd/AntMgr 基于netcore2.0 mvc 开发的 快速搭建具有如下特色的后台管理系统 特色: 用户管理 菜单管理 角色管理 权限管理 ...

  8. java源码解析之String类(五)

    /* * 切片函数,非常重要,这里一定要牢记beginIndex是开始位置,endIndex是结束位置,区别于以前学的offset是开始位置,而count或length是个数和长度 * 比如说,new ...

  9. 【win10家庭版】删除文件提示没有权限最简单的方式（已验证）

    趁着618入了新本本,预装了家庭普通版Win10,但是实际使用中遇到了一些问题.问题不大,但是着实反人类,在此吐槽! 问题: 首先,进入系统会提示你建一个账号,建立完成登录系统.本账户拥有Admini ...

  10. Shell学习笔记2》转载自runnoob

    学习且转载地址:http://www.runoob.com/linux/linux-shell-passing-arguments.html 这个网站整理的的确不错,看着很清晰,而且内容也很全面,个人 ...