欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载

CSS background 背景教程

发表于2019-06-05 22:53| 次阅读| 来源网络整理| 作者session

摘要:CSS background CSS 背景知识引见及案例演示掌握CSS背景知识点。

CSS 背景-CSS background

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、设置图为背景。可能设置对象背景为图片,假设背景是图片可能让图片反复平铺横铺,或将图片作为对象背景固定在对象任何地位。

Background剖析解析图

background背景语法构造剖析图


Css background复合背景构造剖析图

Body{background:#FFF url(//www.css5.com.cn/images201610/logo.gif) no-repeat 0 0 fixed }

设置网页背景样式

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

Html背景单词:
Bgcolor设置背风光彩 与CSS背风光彩对应background-color
Background设置图片作为背景与CSS背景图片对应background-image

最原始HTML背景设置演示代码:

<table bgcolor="#996600">
<tr>
<td background="//www.css5.com.cn/img/css-logo.gif"
width="130" height="100">&nbsp;</td>
</tr>
</table>

这里设置了table背风光彩为#996600,然后设置了td的背景图片为//www.css5.com.cn/img/css-logo.gif

二、背风光彩

background-color:#FFF

div{background-color:#FFF}

设置对象背景为纯白色

假设是给table设置背风光彩可能利用bgcolor="色彩值"即可设置对象背风光彩。
假设是CSS背风光彩,可利用background-color:色彩值;或 background:色彩值设置对象背风光彩。
CSS 背风光彩设置DIV+CSS演示图:
 


以上截图分别利用background-color和background来设置对象背风光彩

三、CSS图片背景

这里说的是以图片作为背景图片 -  CSS 背景图片具体引见://www.css5.com.cn/jiqiao/80.shtml
CSS可能利用background或background-image间接引用图片地址来设置图片作为对象背景。

background:url(//www.css5.com.cn/img/logo.gif);设置CSS5的LOGO图片作为背景

background-image:url(//www.css5.com.cn/img/logo.gif);具备相反效果。这样设置图片作为背景有个毛病就是图片会上下左右的反复,接上去咱们只有看以下图例教程即可掌握CSS background


图片背景样式(固定、滚动)

完成这个效果利用CSS单词是background-attachment 当然通常情况下背景默许是固定的假设是本人利用CSS background简写则如上图。
background-attachment利用解析:
background-attachment:fixed; 背景固定
background-attachment:scroll css背景图片是随对象内容滚动

图片background背景语法:

background-image :url (url)
background-image :url (//www.css5.com.cn/images201610/logo.gif)设置对象背景为图片//www.css5.com.cn/images201610/logo.gif

假设图片作为背景时分要求能否反复平铺,平铺方向等咱们都需求background-position和background-repeat配合利用

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

这里定义对象div,背景图片为//www.css5.com.cn/images201610/logo.gif,并且背景图片不反复,定位于div对象靠左距离5px,靠上距离6px

四、DIV CSS背景居中