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:背景图像 ...
随机推荐
- 博客系统(cnblog)
1.用户表:Userinfo 2.博客站点表:Blog 3.标签表:Tag 4.分类表:Category 5.文章表:Article 6.点赞踩表:ArticelUpDown 7.评论表:Commen ...
- Oracle GoldenGate 18.1发布
软件下载地址:https://www.oracle.com/technetwork/middleware/goldengate/downloads/index.html 文档下载地址: https:/ ...
- composer安装。
我们这里实在Windows下进行的安装.1.下载Composer安装包.网址:https://getcomposer.org/download/下载Composer-Setup.exe 安装文件.2. ...
- windows系统开启虚拟化
电脑如何开启虚拟进化 当VMware安装系统时,如果电脑没有开启虚拟化,在安装过程中,会发生错误. 查看电脑是否开启虚拟化,[任务管理器] 正常情况如上图,而当虚拟化没有开启的时候,如何解决? int ...
- PHP选择排序
选择排序,非常的直观,也相对简单. 思路如下: 假设,从小到大排序. 首先,第一轮循环,从所有数组中,找出最小的元素,然后将其下标记录下来. 然后,确定不是第一个元素,则和第一个元素进行交换. 接下来 ...
- 制作用户登录界面（JAVA实现）
设计实现如图所示的个人信息注册.包含单选按钮.多选按钮.下拉框事件. Zuoye类: package example02; import java.awt.event.ActionEvent; imp ...
- range 小数据池介绍
1.range 2.小数据池 1. range 范围 [起始位置:终止位置:步长]range(起始位置,终止位置,步长) #顾头不顾尾 3.小数据池 小数据池,也称为小整数缓存机制,或者称为驻留机制等 ...
- 根据字符串导入包使用-----importlib
import importlibo = importlib.import_module("xx.oo")s2 = "Person"the_class = get ...
- Javascript的防抖和节流、VUE的防抖和节流
js原生 函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能 ...
- Django 中使用 Celery
起步 在 <分布式任务队列Celery使用说明> 中介绍了在 Python 中使用 Celery 来实验异步任务和定时任务功能.本文介绍如何在 Django 中使用 Celery. 安装 ...