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. 贝尔金(Belkin)7231-4P tftp救砖

    参考: http://www.right.com.cn/forum/thread-14568-1-1.html 一.准备: 用串口线连上路由板串口,VCC不接,接在J2处,网口远离自己,从左到右为GN ...

  2. 使用php生成数字、字母组合验证码

    项目中经常会遇到一些登陆验证,支付验证等等一系列安全验证的策略.实现方法多种多样,下面就来讲解下如何用php生成简单的文字+数字组合的验证码: 所用语言php,gd库 原理解释: a>实质上是在 ...

  3. docker配置ftp服务器

    docker run --name ftp_server -d -v ~/Projects/ftp:/home/vsftpd -p : -p : -p -:- -e FTP_USER=ftp -e F ...

  4. 跟着未名学Office - 高效工作Outlook

    目录 第一篇邮件与联系人    1 第一节    使用与技巧    1 第二节    高效    11 第二篇    事务助手    21 第一节    日程管理    21 第二节    任务    ...

  5. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  6. tomcat源码 StandardService

    在执行StandardServer的initInternal的时候会执行StandardService#init,然后会调到initInternal protected void startInter ...

  7. Dubbo(6)Dubbo服务集群实现负载均衡

    什么时候用到集群?比如说某个服务,并发量特别大的时候就会用到集群: 具体的话比如说,某些特殊的项目一天的注册量10万,国家的一些考试系统,集中在几天,注册量一天10万,如果只弄一个服务,根本服务不过来 ...

  8. Java NIO系列教程（四） Scatter/Gather

    Java NIO开始支持scatter/gather,scatter/gather用于描述从Channel(译者注:Channel在中文经常翻译为通道)中读取或者写入到Channel的操作.分散(sc ...

  9. 【ZZ】号称“开发者神器”的GitHub，到底该怎么用？

    号称“开发者神器”的GitHub,到底该怎么用? https://mp.weixin.qq.com/s/zpKOBMKWckY05Mv_B28RgQ A developer’s introductio ...

  10. Hive学习笔记一

    1. Load的使用 //在1.x版本中定义long数据类型会报错(用bigint代替) create table t_load_stu(name string,age bigint) row for ...