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. Arrays Multi

    <!DOCTYPE html><html><body><?php$cars = array   (   array("Volvo",22, ...

  2. 重学STM32---（七） FSMC+LCD

    关于FSMC+LCD第一次学习完时候,自己也还是对这个不清不白,时而清楚,时而糊涂.这一次再次学习的话,不能在这样了,仔仔细细把STM32参考手册,原子的LCD实验看了一遍,又在网上找了好些关于FSM ...

  3. Linux Shell 命令

    (1) 操作一个文件并对文件查询行进行切分处理 (或者1-) (2) 操作文件进行去重并显示重复次数 | sort | uniq -c (3) 查看总的汇总行数 | sort | uniq -c | ...

  4. 转载blog_Linux下Tomcat日志定期清理 及 logrotate 配置

    服务器上的tomcat的catalina.out文件越来越大,查看起来很不方便,以前每次都是想起来的时候手工清理一下(cat /dev/null > catalina.out),后来发现了log ...

  5. ion torrent ion proton

    https://www.youtube.com/watch?v=6Is3W7JkFp8 NGS 的视频 说的不错 一个做癌症的教授讲的 Ion Torrent™ next-generation seq ...

  6. [转载] codeblocks快捷键

    ==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小. • 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling. • C ...

  7. php函数 date() 详细资料

    date_default_timezone_set(PRC); /*把时间调到北京时间,php5默认为格林威治标准时间*/ date () a: "am"或是"pm&qu ...

  8. 软件工程课程作业（二）--四则运算2改进版（c++）

    题目要求: 1.避免题目重复 2.可定制(数量/打印方式) 3.可以控制下列参数 (1)是否有乘除法 (2)是否有括号 (3)数值范围 (4)加减有无负数 (5)除法有无余数 关键设计思想: oper ...

  9. boot/head.S

    /* * linux/boot/head.S * * Copyright (C) 1991, 1992 Linus Torvalds */ /* * head.S contains the 32-bi ...

  10. ubuntu12.04 修复Grub2

    电脑双系统,但是把win7重装了之后,会发现grub坏了,只能进入win7. 遇到过好几次,虽然每次都成功解决问题了,但是都花费了不少时间. 所以,总结一下,基本是从网上找到的方法,有的行不通,有的可 ...