css背景是个很有意思的东西，可设置

背景色:background-color

背景图:backgoround-image

背景图显示相对位置：background-position,正数图片往右下移，负数图片向左上移

背景图片示例：（每张图片高度50px,空白处50px）

示例：

1、背景色：

　　css文件代码

.c1{

    width: 100%;

    height: 50px;

    background-color: #425a66;

}

　　html代码，跟下面的所有情况一样，后面就不再写了

<body>

        <div class="c1"></div>

</body>

　　效果图

2、背景图（不重复）

　　css代码

.c1{

    width: 100%;

    height: 500px;

    background-color: #425a66;

    background-image: url(quantu.png);

    background-repeat: no-repeat;

　　效果图

3、背景图（重复）

css代码

.c1{

    width: 100%;

    height: 500px;

    background-color: #425a66;

    background-image: url(quantu.png);

}

　　效果图

4、显示背景图相对位置

css代码(0:图片在x轴不动，-300图片在y轴向上移动300px,正好显示第4张图片)

由于我们的

height: 50px; 与图片的高度相同
所以正好显示了一张小图片。
.c1{

    width: 100%;

    height: 50px;

    background-color: #425a66;

    background-image: url(quantu.png);

    background-repeat: no-repeat;

    background-position: 0 -300px;

}

　效果图

CSS之background属性的更多相关文章

  1. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  2. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  3. 深入学习css之background属性

    css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...

  4. CSS background 属性全家桶

    介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...

  5. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  6. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  7. CSS background 属性 总结

    CSS background 属性总结

  8. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  9. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

随机推荐

  1. HDU 2291

    http://acm.hdu.edu.cn/showproblem.php?pid=2291 读题读的烦死了,今天果真不适合做题 题意:给两个n*n的矩阵,第一个代表一个人战胜一个人可以得到的经验值, ...

  2. utf8与utf-8的区别

    相信很多程序员刚开始也会有这样的疑惑,如题,我也是.    其实,他们可以这样来区分.    一.在php和html中设置编码,请尽量统一写成“UTF-8”,这才是标准写法,而utf-8只是在wind ...

  3. Qt4升级到Qt5

    QtWidgets作为一个独立的模块 例如编译时错误 error: QMainWindow: No such file or directory error: QToolButton: No such ...

  4. 【题解】【BST】【Leetcode】Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  5. php-抽象

    //继承//子类可以继承父类的一切//特点:单继承//函数的重写 //多态//当父类引用指向子类实例,由于子类对父类的方法进行了重写,父类引用在调用该方法的时候表现出的不同//如果一个方法需要一个父类 ...

  6. 参数化SQL sql语句

    在日常的数据插入时,需要避免数据脚本注入攻击,所以进行参数化SQL很有必要. --说明参数 ) --参数赋值 ' --数据插入 ,'A')

  7. Sprint第二个冲刺（第五天）

    一.Sprint 计划会议: 容杰龙继续完善昨天的SQLite修改数据操作,待全部操作完善后交给炜杰进行布局规范和整合. 二.Sprint周期:   看板: 燃尽图:

  8. JavaScript----函数的封装、继承和多态

    1.封装:把实现一个功能的代码放在一个函数中封装起来,以后再想实现这个功能的时候,我们不需要重新的编写代码了,只需要执行对应的函数即可,我们把这种机制就称之为"函数的封装"--&g ...

  9. 第一课 T语言关键字(版本TC5.0)

    关键字 TC综合开发工具的语法里包含了大量的关键字,而且对TC综合开发工具支持的关键字都做了亮色处理,以便大家在写脚本的时候容易区分. 关键字在使用的时候,都有特定的作用,不能作为变量名.函数名等等使 ...

  10. Linux下串口与工业协议的开发

    1.串口通信原理 串口通信定义 串口通信:数据的串行传送方式.串口通信可分为同步通信与异步通信. 同步通信:按照软件识别同步字符来实现数据的发送和接收. 将许多字符组成一个信息组进行发送 要求发送时钟 ...