background——背景属性
一、背景属性
1.1、背景颜色background-color
<style>
/*浮动，横向排列*/
div{float: left;} /*background-color属性值支持三种形式：
name - 指定颜色的名称，如 "red" ；
RGB - 指定 RGB 值, 如 "rgb(255,0,0)" ；
Hex - 指定16进制值, 如 "#ff0000"。*/ .one{
width: 100px;
height: 100px;
background-color: red;
}
.two{
width: 100px;
height: 100px;
background-color: rgb(0,277,0);
}
.three{
width: 100px;
height: 100px;
background-color:#66FFFF;
}
</style> <body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
代码执行如下图：
1.2、背景图片background-iamge
<style>
div{
width: 200px;
height: 200px;
border: 3px solid red;
background-image: url(img/love.jpg);
}
</style> <body>
<div></div>
</body>
代码执行如下图：
1.3、背景是否重复background-repeat
<style>
div{
width: 490px;
height: 200px;
border: 3px solid red;
background-image: url(img/love.jpg);
/*默认 重复repeat*/
background-repeat:no-repeat;
}
</style>
代码执行如下图：
1.4、背景是否固定background-attachmen（属性值默认为scroll）
<style>
body{
width: 490px;
height: 200px;
background-image: url(img/love.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
默认scroll效果图：
设置fixed运行效果图：
1.5、背景图像的开始位置background-position
<style>
div{
float: left;
width: 300px;
height: 300px;
border: 3px solid red;
margin: 10px;
background-image: url(img/love.jpg);
background-repeat:no-repeat;
}
.one{
background-position: center;
}
.two{
background-position: bottom right;
}
.three{
background-position: 10% 40%;
}
.four{
background-position: 40px 10px;
}
</style> <body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
代码执行效果图:
二、背景复合样式background（颜色可以写在最前面|最后面）
<style>
/*复合样式下设置fixed后position位置根据可视区域设置
复合样式下设置scroll后position位置根据元素自身设置*/
div.one{
width: 700px;
height: 300px;
border: 3px solid #000;
background:pink url(img/love.jpg) no-repeat scroll center;
}
</style>
第三、兼容
所有浏览器都支持 background 属性。
注意：inherit：IE7 以及更早的浏览器不支持 "inherit"。IE8 需要声明 !DOCTYPE。IE9 支持 "inherit"。
background——背景属性的更多相关文章
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS下背景属性background的使用方法
背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...
- CSS背景属性background
background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...
- background 背景类八大属性
background 背景类八大属性 背景颜色(当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上) background-image:背景图像 background-repeat:背景图像 ...
随机推荐
- Linux Spi驱动移植小结
2012-01-07 22:21:29 效果图: 理论学习后,主要是linux中spi子系统设备框架的了解后,主控制器与设备分离的思想,那么我要开始动手了. 1, make menuconfig添加 ...
- 打return
var zz=xx(); alert(zz); zz=yy(); alert(zz); function xx(){ var i=1,j=2; return i+j; } function yy(){ ...
- 微信省市区 Mysql数据库
$jsonStr = '[{"cities":["\u5b89\u5e86","\u868c\u57e0","\u4eb3\u5d ...
- springboot使用validation 插件做数据校验
不多说废话. 首先,我们需要在入参实体对象中,使用注解,控制 @Datapublic class UpdateShufflingRequest { private String shuffling_l ...
- Scrum Meeting 合集
一.Alpha [Alpha]Scrum meeting 1 [Alpha]Scrum meeting 2 [Alpha]Scrum meeting 3 [Alpha]Scrum meeting 4 ...
- .equals()到底是什么意思？
.equals() 在Java中判断是否相等,与 == 的区别是 .equals() 只判断值是否相等,不管两者是否存在同一地址.而 == 则是判断值与存在地址都得相等 扩展资料: 由equals的源 ...
- iperf详细使用方法
Iperf 是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽, 具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包丢失. Iperf ...
- Tomcat每日报错
本次针对tomcat端口占用所产生的8080:8009:8000报错 1.打开CMD命令提示符(win+R). 2.输入指令netstat str -ano|findstr 8080(8080这里可以 ...
- Spring history、design philosophy (Spring的历史及设计理念）
一,Spring的发展史 1,Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和x ...
- 7-27 Codeforces Round #499 (Div. 2)
C. Fly 链接:http://codeforces.com/group/1EzrFFyOc0/contest/1011/problem/C 题型:binary search .math. 题意:总 ...