背景图：（相关验证代码请查看代码，在验证时需将当前不需要验证的代码注释掉）
    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. c# 可移动可改变大小的控件

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

  2. CentOS7中firewalld的安装与使用详解

    一.软件环境 [root@Geeklp201 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 二.安装firewall ...

  3. Python 爬虫从入门到进阶之路（六）

    在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...

  4. 解决npm install卡住不动的小尴尬

    npm install卡顿问题记录 遇到的问题 npm install -g @angular/cli 安装angular cli工具时,发现进度条一直卡住不动,相信很多朋友也遇到过.原因应该是国内的 ...

  5. 跟我学SpringCloud | 第一篇：介绍

    首先讲一下我为什么要写这一系列的文章,现在网上大量的springcloud相关的文章,使用的springboot和springcloud的版本都相对比较老,很多还是在使用springboot1.x的版 ...

  6. 简易数据分析 04 | Web Scraper 初尝--抓取豆瓣高分电影

    这是简易数据分析系列的第 4 篇文章. 今天我们开始数据抓取的第一课,完成我们的第一个爬虫.因为是刚刚开始,操作我会讲的非常详细,可能会有些啰嗦,希望各位不要嫌弃啊:) 有人之前可能学过一些爬虫知识, ...

  7. 【JAVA】POI生成EXCEL图表（柱状图、折线等）

    1.使用excel工具自带的图形工具创建一个图: 2.绑定数据区域: 3.数据区域绑定完成,我们要做的就是将数据写入到数据区域中: 4.标记 5.POI 引入包 <!-- https://mvn ...

  8. linux配置多个tomcat

    1.修改tomcat目录下面conf/server.xml,修改shutdown的port和http port 2.修改bin/catalina.sh 在最前面加上 export CATALINA_B ...

  9. vuex中使用对象展开运算符

    使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...

  10. .net core 杂记：WebAPI的XML请求和响应

    一般情况下,restfult api  进行数据返回或模型绑定,默认json格式会比较常见和方便,当然偶尔也会需要以XML格式的要求 对于返回XML,普通常见的方式就是在每个aciton方法进行诸如X ...