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. JQuery源码分析（二）

    立即调用表达式: 任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题.jQuery就是利用了JavaScript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题. jQue ...

  2. C#基础知识学习

    C#基础知识整理 学习地址:http://blog.csdn.net/column/details/csarp.html

  3. Ferry Loading II_贪心

    Description Before bridges were common, ferries were used to transport cars across rivers. River fer ...

  4. PHP访问REST API上传文件的解决方案

    最近写的一个小功能需要通过rest方式上传文件,因此就在网上找了一些解决方案.接下来说明以下我采用的解决方案:我是利用curl来实现的,其中CURLOPT_POST的值为TRUE代表的是请求类型为PO ...

  5. HDU 5100

    http://acm.hdu.edu.cn/showproblem.php?pid=5100 用1*k方格覆盖n*n方格 有趣的一道题,查了下发现m67的博客还说过这个问题 其实就是两种摆法取个最大值 ...

  6. Entityframework更新数据和插入数据

    public bool UpdateEmloyeeInfo(EmployeInfo employeInfo) { bool flg = false; try { using (UserManageDB ...

  7. WCF寻址

    1.如果在<System.ServiceModel>.<Services>.<Service>.<host>.<baseaddress>定义 ...

  8. C++宏定义中"#"与"##"的妙用

    在C++开发当中经常用到宏的定义当中使用"#"或者"##",以下是对着两种符号使用方法的简单描述: define中的#就是把#后面的参数当做一个符号来使用,简单 ...

  9. LeetCode Populating Next Right Pointers in Each Node （技巧）

    题意: 给一棵满二叉树,要求将每层的节点从左到右用next指针连起来,层尾指向NULL即可. 思路: 可以递归也可以迭代.需要观察到next的左孩子恰好就是本节点的右孩子的next啦. (1)递归:这 ...

  10. Lucene建索引代码

    Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎. Lucene的目的是为软件开发人员提供一个简单易 ...