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. iOS APP上线流程

    前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...

  2. TableView--通讯录--开篇

    一,需求图:

  3. Cisco ASA 高级配置

    Cisco ASA 高级配置 一.防范IP分片攻击 1.Ip分片的原理: 2.Ip分片的安全问题: 3.防范Ip分片. 这三个问题在之前已经详细介绍过了,在此就不多介绍了.详细介绍请查看上一篇文章:I ...

  4. HDU 5784 (计算几何）

    Problem How Many Triangles (HDU 5784) 题目大意 给定平面上的n个点(n<2000),询问可以组成多少个锐角三角形. 解题分析 直接统计锐角三角形较困难,考虑 ...

  5. Unity3D 创建动态的立方体图系统

    Unity3D 创建动态的立方体图系统 这一篇主要是利用上一篇的Shader,通过脚本来完成一个动态的立方体图变化系统. 准备工作如下: 创建一个新的场景.一个球体.提供给场景一个平行光,准备2个立方 ...

  6. Unity3D ShaderLab 使用贴图对模型的高光进行遮罩

    Unity3D ShaderLab 使用贴图对模型的高光进行遮罩 前面研究了高光效果的实现,再说说现很多游戏用到的高光贴图技术,因为它可以让3D美工更容易控制最终的视觉效果. 这也就为我们提供了另外的 ...

  7. C#静态类和静态成员

    1. 静态类 1.1 简介  静态类和类成员用于创建无需创建类的实例就能够访问的数据和函数. 静态类成员可用于分离独立于任何对象标识的数据和行为:无论对象发生什么更改,这些数据和函数都不会随之变化. ...

  8. json-c-0.9 的简单用法

    1.下载安装包路径: wget http://oss.metaparadigm.com/json-c/json-c-0.9.tar.gz 2.解压安装包 tar zxvf json-c-0.9.tar ...

  9. chromium 安装 pepper flash player

    打开终端,输入以下命令即可安装: 1. sudo apt-get update 2. sudo apt-get install chromium-browser 3. sudo apt-get ins ...

  10. shell命令：给当前目录里一个文件压缩一份不包含.svn文件的zip包

    filepath=$(cd ")"; pwd) packagePath="$filepath"/package zipPath="$filepath& ...