background-repeat:默认是平铺的，也即是还有空间的话将一张接着一张显示

设置为 no-repeat  就最多显示一张

background-attachment:设置是否固定图片，在有滚动条的页面，随着滚动条的移动将会看到图片的不同位置

看下面的例子；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*权重：数数 id class 标签*/

        /*100*/

        #box {

            border: 1px solid red; /*设置边框*/

            width: 200px; /*图片显示的范围*/

            height: 200px;

            background-image: url("./timg.jpg");

            background-repeat: no-repeat; /*默认平铺，no-repeat不平铺，就打印本身一张图片*/

            /*background-position: 20px 20px; !*相对原来位置移动*!*/

            background-position-x: -635px; /*控制图片x方向的移动*/

            background-position-y: -250px; /*控制图片y方向的移动*/

            background-attachment:fixed; /*设置这条可以滚动条看到的是图片的不同位置*/

        }

        .box2 {

            width: 24px;

            height: 33px;

            background: url("taobao.png") no-repeat 0 -265px;

            background-attachment: fixed;

        }

    </style>

</head>

<body style="height:2000px;"> /*2000px让其有滚动条*/

<div id="box" class="box"></div>

<div class="box2"></div>

</body>

</html>

背景图片的移动----background-attach-----background-repeat的更多相关文章

  1. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  2. QWidget窗体中使用Q_OBJECT后无法添加背景图片或背景色

    在继承自QWiget的窗体中,设置背景图片或背景色比较简单的方法是使用setStyleSheet()函数,比如在构造函数中可以这样来设置背景图片: this->setStyleSheet(&qu ...

  3. 动态设置背景图片，class，style

    1.动态设置背景图片<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }" ...

  4. swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）

    swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...

  5. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

  6. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  7. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  8. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  9. css背景图片位置：background的position

    position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-re ...

  10. ie8 background背景图片不显示问题

    在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !import ...

随机推荐

  1. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  2. centos7上为什么不使用libcgroup进行资源限制

    不使用libcgroup的原因 centos7上使用libcgroup进行资源限制可参考 https://blog.csdn.net/lanyang123456/article/details/814 ...

  3. windbg 如何再内核模式调试用户空间的程序

    1:使用!process 0 0 获取用户空间的所有的进程的信息 !process 0 0 **** NT ACTIVE PROCESS DUMP ****    PROCESS 80a02a60   ...

  4. typedef定义数组类型

    typedef语句定义数组类型 1. 一维数组类型的定义格式 typedef <元素类型关键字><数组类型名>[<常量表达式>]; 例如: (1) typedef ...

  5. Linux下批处理文件编写

    linux下的批处理文件,基本就是shell脚本文件. 一.最简单的脚本书写方法为: 1.新建一个文件,名字为test(自己定义的名字) touch test.sh 2.在里面编写脚本 程序必须以下面 ...

  6. 深入理解java虚拟机读后总结（个人总结记录）

    1.jvm布局:   jdk1.6版本JVM布局分为:heap(堆),method(方法区),stack(虚拟机栈),native stack(本地方法栈),程序计数器共五大区域. 其中方法区包含运行 ...

  7. HelloStruts

    Hello Struts 建立项目 打开myeclipse 新建项目 选择myeclipse-java enterprise projects-web project 项目名称:hellostruts ...

  8. SET NOCOUNT ON

    每次我们在使用查询分析器调试SQL语句的时候,通常会看到一些信息,提醒我们当前有多少个行受到了影响,这是些什么信息?在我们调用的时候这些信息有用吗?是否可以关闭呢? 答案是这些信息在我们的客户端的应用 ...

  9. ubuntu 安装php 扩展和查看扩展包

    利用ubuntu的软件包下载.安装工具:apt-get 输入下面的命令即可安装 php扩展库mcrypt.curl.gd库.mbstring.simplexml. apt-get install ph ...

  10. css-去掉IE浏览器自带×号

    1.去除IE输入框的叉号 /* 去除IE输入框的叉号 */ ::-ms-clear, ::-ms-reveal{ display:none; } 2.前端多行展现代码,多余部分使用...代替 div{ ...