CSS 背景background实例

css背景background用于设置html标签元素的背景颜色、背景图片已经其他背景属性。本文章向码农介绍CSS 背景background使用方法和基本的使用实例。需要的码农可以参考一下。

一、Css background背景语法

CSS背景基础知识

CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

背景语法：

background: background-color || background-image || background-repeat || background-attachment || background-position

CSS中背景单词：

background CSS手册查询-background
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。

Background背景样式的值是复合属性值组合，也就是背景单词的值可以跟多个属性值，值与值之间使用一个空格间隔链接上即可。
如：

background:#000 url(图片地址) no-repeat left top

Css background背景作用：

1、设置纯色背景。背景background可以设置对象纯色的背景颜色，
2、设置图为背景。可以设置对象背景为图片，如果背景是图片可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。

设置网页背景样式

Html原始背景与CSS背景对照
Html是指对应效果的table背景设置

Html背景单词：

Bgcolor设置背景颜色 与CSS背景颜色对应background-color
Background设置图片作为背景与CSS背景图片对应background-image

二、背景颜色

background-color:#FFF

设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色，可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。

三、CSS图片背景

CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

background:url(http://www.manongjc.com/logo.gif);

设置LOGO图片作为背景

或

background-image:url(http://www.manongjc.com/logo.gif);

具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复。

background-attachment使用解析：

background-attachment:fixed； 背景固定

background-attachment:scroll； css背景图片是随对象内容滚动

图片background背景语法：

background-image :url (url)

background-image :url (http://www.manongjc.com/logo.gif）

设置对象背景为图片http://www.manongjc.com/logo.gif

如果图片作为背景时候要求是否重复平铺，平铺方向等我们都需要background-position和background-repeat配合使用

div{background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px }

这里定义对象div，背景图片为http://www.manongjc.com/logo.gif，并且背景图片不重复，定位于div对象靠左距离5px，靠上距离6px

四、背景居中

CSS 背景分为左右居中和上下居中。

背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为500px，那就设置图片居顶部多少PX可以让图片实现上下居中。

五、复合背景样式简写

我们使用时候都需要考虑到代码优简，这里可以优化的简写代码

1、如果只设置背景为单一颜色

background-color:#FFF

我们简写为

background:#FFF

2、图片设置为背景简写

background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px

我们简写为：

background:url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px

六、CSS background（背景）总结

使用图片作为背景在一个网页布局中常常会遇到，希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置）

1、设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。

网页布局时候我们常常对网页背景设置颜色、背景设置图片，达到我们需要的美观效果，我们实践制作写css background背景尽量从简，图片引入时候注意路径正确，如需定位对象背景。

经典背景复合属性表达式：

.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px}

这里既设置背景颜色，背景图片引入，背景图片定位、图片作为背景是否重复的样式。

原文地址：http://www.manongjc.com/article/842.html

相关阅读：

时间： 2024-10-09 15:40:17

CSS 背景background实例的相关文章

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性). css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性,它们是: * p

关于CSS背景background属性经典的配置

background background-color: transparent; background-image: url("/assets/images/phonetitle1.gif"); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-clip: border-box; background-origin: padding-box;

css背景background

background用来定义html元素的背景效果 background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法 1.十六进制方式,如"#ff0000" 2.RGB方式,如"rgb(255,0,0)" 3.颜色名称,如"red" background-image:定义元素的背景图片,通过background-image:url('path/图片名称')指定 默认情况下,背景图片会在水平和垂直方向上进行平铺重复显示,即默认的

web前端入门到实战：CSS背景background

1.背景颜色 background-color 取值:合法的颜色值和transparent 注:背景颜色和背景图片,填充都是从边框开始 2.背景图片 background-image:url(图片路径) 3.背景图平铺 background-repeat: 取值: repeat:平铺 no-repeat:不平铺 repeat-x:水平方向平铺 repeat-y:垂直方向平铺 4.背景图定位 background-posion:x y,设定的值都是相对于浏览器,不是相对于容器 取值: (1):x,

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

css背景及css列表

CSS背景 background是一个综合属性,它分为以下几个属性. background-color 背景色 background-image 背景图片 background-repeat 设置背景图的平铺方式 属性值:no-repeat repeat-x repeat-y background-position 设置或检索对象的背景图像位置 background-size 设置背景图的尺寸 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的 fixed 

CSS 背景-CSS background

这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || background-attachment || background-

CSS实现的鼠标经过链接切换背景图片实例代码

CSS实现的鼠标经过链接切换背景图片实例代码:很多导航栏都有这样的效果,当鼠标滑过的时候能够实现背景图片的切换,算是一个比较好的效果吧,也算是对导航栏最基本的美化了.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="

css之背景(background)家族

背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 背景(background)家族在css2中由5个主要的背景属性组成,分别是: background-color 指定填充的背景颜色 background-image 引用图片作为背景图 background-position 指定元素背景图片的位置 background-repeat 决定背景图