设置网站的图片涉及到三个问题，分别是：

1. 网页中的图片应该怎样设置？

在运用 XHTML+CSS 制作页面的时候，网页上的图片可以通过二种方式在页面中呈现：

一. 使用图片标签，直接写在 XHTML 文档内：<img src=”1.jpg” />
二. 运用 CSS 将图片做为某个元素的背景，比如设置 div 元素：div { background: url(1.jpg); }

这二种方式不能混淆，因为它们有本质上的区别，如果设置错误，有可能会 影响页面的可用性！

它们的本质区别以及设置原则：

——凡是属于网页内容的图片，都用图片标签 <img /> 直接写入 XHTML 文档中；

——凡是不属于网页内容的图片，一律采用 CSS 进行背景图片设置，它们起到网站装饰、美化的作用，属于网站表现；

我们只要能分清什么图片是网页内容就行了，因为除了网页内容图片，其他的图片一律用 CSS 设置成元素的背景。

分析下面这张图，来找找哪些是网页内容图片：

上图中，标注为 “<img />” 的是页面内容，可以直接写成 XHTML 代码，

其他标注为 “background-image” 的都应该做为背景，设置成元素的 CSS 样式。

2. 如何设置背景？

设置 div 元素背景的很简单：div { background: red; }

设置一个 既有背景颜色，又有背景图片 的 div 才是我们关注的，效果图如下所示：

分析这个效果图，我们可以得知如下信息：

在制作的时候，我们可以先把渐变部分切成 1 像素宽、68 像素高的图片：

把中间这根细小的图片保存为“bg.gif”，设置 div 样式如下：

div {
width: 100px; height: 100px; border: 1px solid #626262;
background: url(bg.gif);
}

得到下面的结果：

再把图片设置成水平方向平铺：

div {
width: 100px; height: 100px; border: 1px solid #626262;
background: url(bg.gif) repeat-x;
}

则背景图片只可能沿水平方向平铺，不会再折行平铺了：

最后，添加上背景颜色值：
div {
width: 100px; height: 100px; border: 1px solid #626262;
background: #f5f5f5 url(bg.gif) repeat-x;
}

div 背景制作完成：

3. 页面上的小图标如何处理？

效果图如下所示：

根据上面的分析，我们可以知道这个效果图的三张小图片，都是做为元素的背景来设置。

首先用 PS 切一张小图片，在切图的时候，注意尽量切成背景透明的 GIF 图片，不要把背景颜色也切下来，万一背景颜色发生变化，切下来的这张图片仍然可以使用：

然后开始写结构：

<ul>
<li><a href="#">页面</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">外观</a></li>
</ul>

写样式：

ul { padding-left: 0; margin-left: 0; width: 120px; border: 1px solid #e3e3e3; border-bottom: 0; }
li { list-style: none; }
a { display: block; height: 27px; line-height: 27px; border-top: 1px solid #fff; border-bottom: 1px solid #e3e3e3; background: #f1f1f1; padding-left: 26px; text-decoration: none; color: #21759b; font-size: 12px; }
a:hover { color: #d54e21; text-decoration: underline; }

效果如下：

开始添加小图片。要实现三个 li 内图片都不一样，需要在 a 标签内添加三个不同的样式名：

<ul>
<li><a class="ico1" href="#">页面</a></li>
<li><a class="ico2" href="#">评论</a></li>
<li><a class="ico3" href="#">外观</a></li>
</ul>

准备好要设置的图片：

注意：把3个小图片切成一张 GIF 图，然后利用背景图片的定位来制作。

完整的 CSS 代码：

ul { width: 120px; border: 1px solid #e3e3e3; border-bottom: 0; padding-left: 0; margin-left: 0; }
li { list-style: none; }
a { display: block; height: 27px; line-height: 27px; border-top: 1px solid #fff; border-bottom: 1px solid #e3e3e3; padding-left: 26px; text-decoration: none; color: #21759b; font-size: 12px; }
a:hover { color: #d54e21; text-decoration: underline; }
.ico1 { background: #f1f1f1 url(ico.gif) no-repeat 5px 6px; }
.ico2 { background: #f1f1f1 url(ico.gif) no-repeat 5px -24px; }
.ico3 { background: #f1f1f1 url(ico.gif) no-repeat 5px -52px; }

这一句：“background: #f1f1f1 url(ico.gif) no-repeat 5px 6px;”
中文解释：背景：背景颜色 图片链接地址 图片不重复 图片水平方向 图片垂直方向；

效果下载：>>点此下载

评论 (0) All

登陆 还没注册？