首页 > 代码库 > 2014年辛星解读CSS第八节 使用背景图片

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

2024-07-13 22:51:59   221人阅读

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

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

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

<html>
<head>
	<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"my.css">>然后是css代码，我们书写如下：
#bg{
        color:#FFF;
	background: url("2.jpg");
	height: 900px;
}

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

那么如果我们只想在竖直方向重复呢，即在水平方向不重复呢？看下面代码：
#bg{
	color: #FFF;
	background: url("22.jpg") repeat-y;
	height: 900px;
}

它的效果是这样滴：


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


联系
我们