背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
    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 Quick 事件处理之信号与槽（foruok的博客）

    前面两篇文章<QML 语言基础>和<Qt Quick 简单教程>中我们介绍了 QML 语言的基本语法和 Qt Quick 的常见元素,亲们,通过这两篇文章,您应该已经可以完成简 ...

  2. QQ空间玩吧HTML5游戏引擎使用比例分析

    GameLook报道/“Cocos 2015开发者大会(春季)”于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了Cocos这款国产引 ...

  3. WCF研究-后篇

    最后就对之前的资料进行整理以及在其他博客园的朋友那看到的资料稍微分享一下,这样有助于学习和使用WCF的朋友更好的学习和理解WCF 后期要是看到合适的资料也会再次编辑这个后篇,让我共同进步! 后篇 1. ...

  4. DUI-Windows消息机制要点（34篇）

    [隐藏] 1窗口过程概念 2消息类型 2.1系统定义消息 2.1.1窗口消息 2.1.2命令消息 2.1.3控件通知消息 2.1.4程序定义消息 3消息队列 3.1系统消息队列 3.2线程消息队列 4 ...

  5. Bootstrap3.0学习（一）

    Bootstrap是Twitter退出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  6. J2EE--Struts2基础开发

    内容中包含 base64string 图片造成字符过多,拒绝显示

  7. jquery中的ajax应用集锦

    一,原生JS实现ajax: 1 2 3 4 5 6 7 8 9 10 11 function AjaxGet()         {             var xhrObj;           ...

  8. kafka笔记4

    应用程序使用KafkaConsumer向Kafka订阅主题,并从订阅的主题上接收消息.Kafka消费者从属于消费者群组,一个群组里的消费者订阅的是同一个主题,每个消费者接收主题的一部分分区的消息. 一 ...

  9. 在前后端分离项目中使用SpringBoot集成Shiro

    前言 这次在处理一个小项目时用到了前后端分离,服务端使用springboot2.x.权限验证使用了Shiro.前后端分离首先需要解决的是跨域问题,POST接口跨域时会预发送一个OPTIONS请求,浏览 ...

  10. Webapi实现websocket实时通讯

    应用场景:前端页面发起一个websocket请求与后端进行实时通讯.后端监听某端口获取数据,将监听到的数据加工处理,通过websocket发送到前端. 这里只提供后台的处理方案仅供参考. 1.后端监听 ...