CSS之background属性
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属性的更多相关文章
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- 深入学习css之background属性
css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...
- CSS background 属性全家桶
介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS background 属性
CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...
- CSS background 属性 总结
CSS background 属性总结
- CSS 背景图像 background属性简写
background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
随机推荐
- 如何重置mysql的密码
如何重置mysql的密码 如果知道密码,则通过以下方式修改: gaurav@gaurav:~$ mysql --user=root --pass mysql Enter password: mysql ...
- php中cookie+mysql实现的购物车代码
<?php//购物车session的产生代码if(! $session && ! $scid) { /* session用来区别每一个购物车,相当于每个车的身份证号: scid只 ...
- Magento中，调用静态块的几种方法
在后台创建一个order_form静态块Block Title :Order FormIdentifier :order_formStatus :EnabledContent :自定义内容 1.如果要 ...
- Qt4升级到Qt5
QtWidgets作为一个独立的模块 例如编译时错误 error: QMainWindow: No such file or directory error: QToolButton: No such ...
- LeetCode Sum Root to Leaf Numbers（DFS）
题意: 给一棵二叉树,每个节点上有一个数字,范围是0-9,将从根到叶子的所有数字作为一个串,求所有串的和. 思路: 普通常规的DFS. /** * Definition for a binary tr ...
- jquery-ui 进度条
<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title> ...
- DNS劫持 DNS污染
编号:1021时间:2016年6月24日17:23:50功能:DNS劫持 DNS污染URL:http://www.itechzero.com/dns-hijacking-dns-pollution-i ...
- VS2010单元测试
编号:1016时间:2016年5月26日09:35:27功能:VS2010单元测试URL :http://blog.csdn.net/tjvictor/article/details/6175362
- hdu 4252 A Famous City
题意:一张相片上的很多建筑相互遮住了,根据高低不同就在相片上把一座高楼的可见部分作为一个矩形,并用数字描述其高度,若一张相片上的两个建筑群中间有空地,高度则为0;求最少有多少个建筑; 分析: 输入的0 ...
- Web应用开发工具及语言需要具备的功能探索
1 前言 最近一个多月在做Web项目,用到的技术有(也不算泄漏公司机密吧): 后台:Struts 2(with JSP/FreeMarker).Spring.Hibernate.MySQL.Web S ...