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:背景图像 ...
随机推荐
- JAVA 11初体验
JAVA 11初体验 随着JAVA没半年发布一次新版本,前几天JAVA 11隆重登场.在JAVA 11中,增加了一些新的特性和api, 同时也删除了一些特性和api,还有一些性能和垃圾回收的改进. 作 ...
- 使用Configuration Extensions读取配置
使用Configuration Extensions读取配置 Configuration Extensions 是微软基于Configuration的扩展,能够很好的解析系统遇到各种配置文件,包括js ...
- v-charts
因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下. 如何配置图表信息 echart的配置项可谓是相当的海量,能不看就不看.而v-chart对其进行了不少 ...
- Java延时器
package listener; import java.util.Timer; import java.util.TimerTask; public class Timeer { /** * sc ...
- pytest使用简介
pytest是基于py unittest的一个单元测试框架,用起来比unittest简单不少,不过和unittest使用不太一样,总结如下: 格式: case的py文件名必须是test开头 def用例 ...
- Maven pom.xml文件详解
Maven pom.xml文件详解 一.简介 POM全称是Project Object Model,即项目对象模型. pom.xml是maven的项目描述文件,它类似与antx的project.xml ...
- 自制操作系统Antz(9)——实现内核 (下) 实现图形化界面
Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html Linux内核源码分析地址:https://www.cnblogs. ...
- [C++ Primer Plus] 第9章、内存模型和名称空间（二）课后习题
一.复习题 2.using声明和using编译指令的区别 using声明: using std::cin; using std::cout; using std::endl; using编译指令:us ...
- 【Django模板006】
在前面的几节中我们都是用简单的django.HttpResponse来把内容显示到网页上,本节将讲解如何使用渲染模板的方法来显示内容. 1.创建一个zqxt_tmpl项目,和一个名称为learn的应用 ...
- web.xml的学习
web.xml 文件提供有关包含 Web 应用程序的 Web 组件的配置和部署信息. Java Servlet 规范根据 XML 模式文档来定义 web.xml 部署描述符文件.为了获取向后兼容性,W ...