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:背景图像 ...
随机推荐
- 语音活性检测器py-webrtcvad安装使用
谷歌为WebRTC项目开发的VAD是目前最优秀.最先进和免费的产品之一.webrtcvad是WebRTC语音活动检测器(VAD)的python接口.兼容python2和python3.功能是将一段音频 ...
- Comparing Spring AOP and AspectJ
AOP 概念 在我们开始之前 , 让我们做一个快速.高级别审查的核心术语和概念 : 方面 — —标准 / 特征代码被分散在多个场所中的应用 , 通常不同于实际的业务逻辑 (例如 , 交易管理) .各方 ...
- 软件测试实验四----mujava变异测试
1.整个路径结构 2.具体内容 2.1mujava的安装 2.1.1更改CLASSPATH环境变量,使命令行可以找到mujava的路径,方便之后mujava的使用. 2.1.2在系统某一路径下按照格式 ...
- Java的流
Java中的流主要是用来读写文件的.只要明确你是读文件还是写文件就可以确定使用哪种流了.读:read 写:writer 1.读文件:filereader这个类,顾名思义就知道是读文件了. 2.写文 ...
- Java8过滤器(Filter)
1.在Java之前对List进行过滤的方式 public class BeforeJava8 { public static void main(String[] args) { List<Pe ...
- php 随机红包算法
<?php /** * 红包分配算法 * * example * $coupon = new Coupon(200, 5); * $res = $coupon->handle(); * p ...
- ApiDoc官方文档
链接地址:https://blog.csdn.net/whatday/article/details/84590795
- 《一些神奇的JS功效》
1: async 异步回调 (ES6) async function test(){ console.log("hello wolrd"); } test().then(funct ...
- Maven的基本概念
一.Maven的基本概念' Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1 ...
- 【转载】SSH协议及其应用
原文作者:阮一峰 链接: http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html http://www.ruanyifeng.com/ ...