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. NET设计模式 第二部分 创建型模式(5)：原型模式（Prototype Pattern）

    原型模式(Prototype Pattern) ——.NET设计模式系列之六 Terrylee,2006年1月 概述 在软件系统中,有时候面临的产品类是动态变化的,而且这个产品类具有一定的等级结构.这 ...

  2. 找出n个数中重复最多的10个数

    题目很清晰,直接上python代码 import pandas as pd import copy class BenchMark: def __init__(self): self.MIN = 10 ...

  3. R基于Bayes理论实现中文人员特性的性别判定

    参见 基于中文人员特征的性别判定方法  理论,告诉一个名字,来猜猜是男是女,多多少少有点算命的味道.此命题是一种有监督的学习方法,从标注好的训练数据学习到一个预测模型,然后对未标注的数据进行预测. 1 ...

  4. FIFO IP核仿真

    FIFO IP核仿真 1.FIFO IP核配置 2.FIFO测试逻辑代码 首先往FIFO里面写入512个数据(FIFO深度的一半),然后再开始同时往FIFO里面写入,读出数据.FIFO读和写的时钟域不 ...

  5. Jenkins触发远程Job的几种方式

    本文叙述基于以下假设前提,将介绍三种在不同的jenkins服务器之间触发Job的方法: 本地Jenkins Server local.jenkins.com远程Jenkins Server remot ...

  6. MySQL 单条记录长度最大65535

    今天设计表结构,加了几个字段,结果报错了 Ligne trop grande. Le taille maximale d'une ligne, sauf les BLOBs, est 65535... ...

  7. DS图--最小生成树

    题目描述 根据输入创建无向网.分别用Prim算法和Kruskal算法构建最小生成树.(假设:输入数据的最小生成树唯一.) 输入 顶点数n n个顶点 边数m m条边信息,格式为:顶点1 顶点2 权值 P ...

  8. js 处理Json 时间带T 时间格式

    对于后台传过来的json数据是带T时间格式的坑处理的一些做法总结 new Date(data[j].addtime).toISOString().replace(/T/g, ' ').replace( ...

  9. maven私服的使用

    使用的版本是nexus2 比较犀利的一个博客https://www.cnblogs.com/tyhj-zxp/p/7605879.html 一.安装搭建私服(windows) bin目录cmd执行ne ...

  10. [蓝桥杯]ALGO-101.算法训练_图形显示

    问题描述 编写一个程序,首先输入一个整数,例如5,然后在屏幕上显示如下的图形(5表示行数): * * * * * * * * * * * * * * * 题目描述 代码如下: #include < ...