码迷,mamicode.com
首页 > Web开发 > 详细

2014年辛星解读CSS第八节 使用背景图片

时间:2014-07-25 11:18:52      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:辛星   html   图片   背景   css   

    这应该是系统CSS的教程的最后一节了,为什么呢,因为到这一节,我感觉基础知识就已经讲完了,接下来的就是无穷的实战,而实战是很难用知识去讲出来的,靠的是积累,拼的是经验,这些都不是讲出来的。

     好,我们下面来说一下用CSS添加背景图片的方式把,它在background属性中指定,可以用url(”图片路径")的方式来指定背景图片,如果是repeat,则图片在横向和纵向上平铺,如果是no-repeat,则背景图像不会平铺,只显示一次,如果是repeat-x,那么就在水平方向平铺,如果是repeat-y,则在竖直方向平铺。

     下面我们举个例子把,首先是HTML代码,如下图:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="my.css">
</head>
<div  id = "bg"> 或许在互联网行业里,还没多少人会注意我这种无名小卒,大家所津津乐道的都是像马云、马化腾、李彦宏啦,对他们的一举一动都十分关心,诚然,古之成大事者,不惟有超世之才,亦必有坚韧不拔之志,苏轼老前辈说的不错。马云,足够的坚持让他成为了中国的电商老大哥,李彦宏则是纯粹的科技流了,再加上早先的在搜索公司工作的经验,使得他一回国就带上了一层光环,马化腾,素来以抄袭著称的boss级人物,我是真的佩服,能抄到这种地步,也真的很有一套。 或许在互联网行业里,还没多少人会注意我这种无名小卒,大家所津津乐道的都是像马云、马化腾、李彦宏啦,对他们的一举一动都十分关心,诚然,古之成大事者,不惟有超世之才,亦必有坚韧不拔之志,苏轼老前辈说的不错。马云,足够的坚持让他成为了中国的电商老大哥,李彦宏则是纯粹的科技流了,再加上早先的在搜索公司工作的经验,使得他一回国就带上了一层光环,马化腾,素来以抄袭著称的boss级人物,我是真的佩服,能抄到这种地步,也真的很有一套。
</div>

</html>
然后是css代码,我们书写如下:

#bg{
        color:#FFF;
	background: url("2.jpg");
	height: 900px;
}

这里我们要保证在同一个目录下有2.jpg这个图片才行,它的默认方式是在横向和纵向都是重复的,截图如下:

bubuko.com,布布扣

那么如果我们只想在竖直方向重复呢,即在水平方向不重复呢?看下面代码:

#bg{
	color: #FFF;
	background: url("22.jpg") repeat-y;
	height: 900px;
}

它的效果是这样滴:

bubuko.com,布布扣


   图片背景方面的知识就先介绍到这里吧也是第一次写,一时间有点想不全,等以后再补。


2014年辛星解读CSS第八节 使用背景图片,布布扣,bubuko.com

2014年辛星解读CSS第八节 使用背景图片

标签:辛星   html   图片   背景   css   

原文地址:http://blog.csdn.net/xinguimeng/article/details/38101141

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!