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. Zookeeper 配置集群环境详解

    在Linux环境下安装zookeeper 在Linux环境下安装zookeeper 1.       将zookeeper-3.4.13.tar.gz复制到linux操作系统 2.       通过p ...

  2. Ambari安装常见问题

    参考自: http://blog.csdn.net/xingxc111/article/details/70667574 http://blog.csdn.net/xfg0218/article/de ...

  3. delphi Int64Rec 应用实例

    以下代码可以看到 Int64Rec <--> Int64 procedure TForm1.Button2Click(Sender: TObject); var ii1,ii2,ii3:I ...

  4. DEBUG模式详解

    1. 如果开启了DEBUG模式,那么以后我们修改了Django项目的代码,然后按下ctrl+s,那么Django就会自动的给我们重启项目,不需要手动重启.2. 如果开启了DEBUG模式,那么以后Dja ...

  5. TreeView添加图片

    实现方式一: 通过代码方式实现如下所示: private string FilePath = Application.StartupPath + "\\Images\\"; Ima ...

  6. ALGO-14_蓝桥杯_算法训练_回文数

    问题描述 若一个数(首位不为零)从左向右读与从右向左读都一样,我们就将其称之为回文数. 例如:给定一个10进制数56,将56加65(即把56从右向左读),得到121是一个回文数. 又如:对于10进制数 ...

  7. Spring-framework应用程序启动loadtime源码分析笔记（二）——@Transactional

    @Transactional标识类或方法,使方法被执行时使用事务方式执行,这里只讨论PROXY方法增强方法.使用@EnableTransactionManagement,默认model=AdviceM ...

  8. 理解 neutron（15）：Neutron Linux Bridge + VLAN/VXLAN 虚拟网络

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  9. 廖雪峰Java3异常处理-2断言和日志-1使用断言

    1.断言 断言Assertion是一种程序调试方式 使用assert关键字 断言条件预期为true 如果断言失败,抛出AssertionError,停止程序 可选的断言消息,断言失败,就会抛出 pub ...

  10. IE浏览器强制不是要兼容视图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...