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. JSTL&EL（程序员必看之一）

    EL表达式 可以在jsp页面中减少大量的Java代码.Expression Language,它是一种借鉴了javaScript和XPath的表达式语言. EL表达式定义了一系列的隐含对象和操作符,使 ...

  2. Oracle sysdate

    SYSDATE --可得到目前系统的时间 ex.       select sysdate from dual; sysdate       ----------       20-SEP-07    ...

  3. mysql的ERROR:1042

    在虚拟机上测试数据库备份功能,需要连接外部机器上的mysql,pdo总是报超时错误! 起初认为是用的mysql账号的域不匹配!后来发现不是因为这个! 在终端中用mysql命令尝试连接,发现返回的错误是 ...

  4. HDU 3038

    http://acm.hdu.edu.cn/showproblem.php?pid=3038 题意:[1-n]的区间,有m个询问,每个询问表示[a,b]的和是s,问一共有多少组矛盾 sum[i]表示i ...

  5. Bat脚本处理ftp超强案例解说

    Bat脚本处理ftp超强案例解说 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://369369.blog.51cto.com/31 ...

  6. [转]50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs

    http://devs.cloudimmunity.com/gotchas-and-common-mistakes-in-go-golang/ 50 Shades of Go: Traps, Gotc ...

  7. Ubuntu下安装lamp

    在Ubuntu里安装PHP环境时可以用恨简单的方法,直接用tasksel命令安装. 首先要安装这个命令: sudo apt-get install tasksel 然后,sudo tasksel in ...

  8. (基础篇) php中0与空 Null false的区别

    <?php $test=0; if($test==''){ echo '<br />在php中,0即为空'; //被输出 } if($test===''){ echo '<br ...

  9. Educational Codeforces Round 15 D 数学推公式

    D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...

  10. tyvj 1067 dp 两次LIS（nlogn）

    P1067 合唱队形 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2004 提高组 第三道 描述     N位同学站成一排,音乐老师要请其中的(N ...