CSS探案之 background背景属性剖析

首先，我们先来看看两个css属性：background和background-color，对！就是这两位，相信大家在平时应该没少

麻烦人家把，反正我是这样

，几乎也少会用到背景图，原因很简单：就是有点害怕用背景图，感觉很繁琐，什么

尺寸啊，位置啊，是否重复啊等等，听着头都大，所以就一直没有去好好地学习一下它，每次碰见就劝自己“下次再

看吧”，然而“明日复明日，明日何其多”，干脆就解决了它

background是css背景属性的简写，例如这样：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

但是它又可以拆分成下面的几个子属性：

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

这些子属性分别代表什么意思呢？下面开始一个个地为大家介绍

********************分割线*********************

属性一：background-color

如其名，这个属性是设置背景颜色的，有5种可能的值：

1.background-color:red;（已颜色英文名称命名的颜色值）

2.background-color:#ff0000;（十六进制的颜色值）

3.background-color:rgb(255,0,0);(rgb类型的颜色值)

4.background-color:transparent;(默认，背景色为透明)

5.background-color:inherit;（值从父元素继承）

当我们单独设置背景颜色时，background-color:red;和background:red;结果是一样的

属性二：background-image

该属性是定义背景图片的url，默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

使用方法：

background-image:url('demo.jpg'); //url中传入背景图的链接

属性三：background-position

该属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

代码举例：

<style type="text/css">

body

{

  border:1px solid #000;

  background-image:url('/i/eg_bg_03.gif');

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-position:center;

}

</style>

</head>

<body>

<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>

</body>

运行结果：

属性四：background-size

background-size 属性规定背景图像的尺寸。

代码示例：

<style>

body

{

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

</style>

</head>

<body>

<p>上面是缩小的背景图片。</p>

<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>

</body>

运行结果：

属性五：background-repeat

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

代码示例：

<style type="text/css">

body

{

border:1px solid #000;

background-image:

url(/i/eg_bg_03.gif);

background-repeat: repeat-y

}

</style>

</head>

<body>

运行结果：

属性六：background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

代码示例：

<style>

div

{

border:1px solid black;

padding:35px;

background-image:url('/i/bg_flower.gif');

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

<div id="div1">

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

<p>background-origin:content-box:</p>

<div id="div2">

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

</body>

运行结果：

属性七：background-clip

background-clip属性规定背景的绘制区域

代码示例：

<style>

div

{

width:300px;

height:300px;

padding:50px;

background-color:yellow;

background-clip:content-box;

border:2px solid #92b901;

}

</style>

</head>

<body>

<div>

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

</body>

运行结果：

属性八：background-attachment

background-attachment规定如何设置固定的背景图像

代码示例：

<style type="text/css">

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

</style>

</head>

<body>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

<p>图像不会随页面的其余部分滚动。</p>

</body>

运行结果：

注意红框里面的滚动条，实际运行时，页面滚动，背景不跟随滚动，但是现在的截图看不出效果，所以对不起各位了

最后，我们将这些属性合并到background一个属性中写一个实例

代码：

<style type="text/css">

body

{

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

</style>

</head>

<body>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

<p>这是一些文本。</p>

</body>

运行结果：

结语：可能大家觉得我这篇文章只是在复制粘贴，没什么意义，确实如此，当我写到一半时，自己就在想放弃，但是

现在想起来，幸亏当时没有把那一半删掉，因为，在写的整个过程中，我先要看一遍w3school的帮助文档，结果还真

是收获不少。世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考

CSS探案之 background背景属性剖析的更多相关文章

css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
CSS样式表之background背景
[CSS常用背景属性]:background (缩写形式) background-color:背景色 background-image:背景图 url中放图片地址,背景图和背景色同时存在时,背景图覆 ...
background——背景属性
一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...
css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
css background 背景知识详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
CSS下背景属性background的使用方法
背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...
CSS代码示例-背景属性(background)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS（九）：background（背景属性）
通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

随机推荐

Git第三方仓库安装方式（IUS）
1.安装使用里面说的自动化安装脚本 curl https://setup.ius.io | sh 2.然后可以看到 git2u相关内容 yum search git 3.执行安装,并查看下版本 yum ...
切面（Aspect）获取请求参数和返回值
@Before("webLog()") public void doBefore(JoinPoint joinPoint) throws Throwable { // 接收到请求, ...
MongoDB安全加固方案，防止数据泄露被勒索
早上起来,发现生产数据库被删了,留下一个数据库名叫“PLEASE_READ”,里面内容如下: "Info" : "Your DB is Backed up at our ...
HBase 官方文档中文版
地址链接: http://abloz.com/hbase/book.html 里面包含基本的API和使用说明
Hadoop IO基于文件的数据结构详解【列式和行式数据结构的存储策略】
Charles所有关于hadoop的文章参考自hadoop权威指南第四版预览版大家可以去safari免费阅读其英文预览版.本人也上传了PDF版本在我的资源中可以免费下载,不需要C币,点击这里下载. ...
spring mvc default-servlet mvc:resources mvc:default-servlet-handler区别
mvc:default-servlet-handler其实就是default-servlet 交由web容器自己处理 mvc:resources spring来处理没有被映射的url web容器来处 ...
CrackMe的简单破解
[CrackMe的简单破解] 对于以下这样的输入账号和密码的窗口,我们可以猜测该程序使用最简单的机制实现,即用strmp来比较用户输入的密码和原始密码匹配.所以为了破解该程序,可以通过bp strmp ...
java基础之JDBC一：概述及步骤详解
1. JDBC的简介概述: 就是Java用来操作不同数据库(DBMS)的类库(技术), 本质就是一些类和接口. /* 类: DriverManager 接口: Driver, Connection, ...
ARCGIS中怎么去除重复的面？（转）
ARCGIS中怎么去除重复的面? https://blog.csdn.net/gswwldp/article/details/66974522 第一种: 1.用polygon to line将面转 ...
pt-table-checksum、pt-table-sync核对主从库一致性
一．下载并安装工具http://www.percona.com/downloads/percona-toolkit/目前最新的版本是percona-toolkit_2.2.12.tar.gz上传到服务 ...

CSS探案之 background背景属性剖析

CSS探案之 background背景属性剖析的更多相关文章

随机推荐

热门专题