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. Java模板引擎之Freemarker

    Freemarker定义: 一款模板引擎 Freemarker是一个web图层组件不是web框架,解析服务端数据到页面 小例子: <#list 集合 as item> list标签对集合进 ...

  2. 用swoole实现mysql的连接池--摘自https://github.com/153734009/doc/blob/master/php/mysql_pool.php

    <?php   $serv = new swoole_server("0.0.0.0", 9508);   $serv->set(['worker_num'=>1 ...

  3. 在windows server上配置java jdk后，可能要些时间生效。

    特别是程序调用java写的bat脚本时.

  4. spring IOC中四种依赖注入方式

    在spring ioc中有三种依赖注入,分别是:https://blog.csdn.net/u010800201/article/details/72674420 a.接口注入:b.setter方法注 ...

  5. 【问题解决】docker中创建volume时，无访问权限

    挂载宿主机已存在目录后,在容器内对其进行操作,报"Permission denied". 可通过两种方式解决: 1> 关闭selinux. 临时关闭:# setenforce ...

  6. MySQL面试题和答案

    Mysql 的存储引擎,myisam和innodb的区别. 答: 1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务的存 ...

  7. 服务注册发现consul之二：在Spring Cloud中使用Consul实现服务的注册和发现

    首先安装consul环境,参照之前的文章:<服务注册发现consul之一:consul介绍及安装>中的第一节介绍. Spring Cloud使用Consul的服务与发现 1.导入依赖pri ...

  8. HDOJ 2003 求绝对值

    #include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...

  9. android scrollview listview显示不全

    原来处理方法是重写ListView import android.content.Context; import android.util.AttributeSet; import android.v ...

  10. BrowserSync前端同步测试工具

    安装教程