CSS教程(3)：通过实例学习CSS背景

2016-02-19 23:56 1 1 收藏

今天图老师小编给大家精心推荐个CSS教程(3)：通过实例学习CSS背景教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

本教程一共三个例子：1、如何重复背景图像;2、如何在垂直方向重复背景图像;3、如何在水平方向重复背景图像。

参考网页教学网关于CSS背景的理论知识：。

本例演示如何重复背景图像。

html
head
style type="text/css"
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat
}
/style
/head
body
/body
/html

2、如何在垂直方向重复背景图像

本例演示如何垂直地重复背景图像。加此信息网页教学网（webjx.com）发布目的是为了防止你变懒！webjx.com不主张采集！

html
head
style type="text/css"
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
/style
/head
body
/body
/html

3、如何在水平方向重复背景图像。

本例演示如何水平地重复背景图像。

html
head
style type="text/css"
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-x
}
/style
/head
body
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1630887.html

上一篇： CSS教程:制作对用户友好的站内搜索表单
下一篇：好照片的HDR绘制漫画般朦胧的浪漫建筑

看过《CSS教程(3)：通过实例学习CSS背景》的人还看了以下文章更多>>

CSS实例教程:CSS Hack

标签： Web开发

写完第七课，因为时间问题没有继续写第八课有关浏览器兼容方面的文章，以为大家可以自己掌握这方面的知识，不过发现有很多同学找了很多资料，很多文章去研究，费时费力的，效果也不好，今天是星期六，我呢就再给大家补写这篇教程，带领大家用最短的时间掌握CSS Hack！说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑...

通过CSS实例实现清除浮动

标签： Web开发

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子： HTML4STRICT代码：div style="width:200px;border:1px solid red;" div style="float:left;width:80px;height:...

CSS教程:CSS背景全攻略

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

原文链接： Backgrounds In CSS: Everything You Need To Know 背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的背景(background)(包含4个新的背景(back...

玩转CSS CSS精彩实例教程(二)

标签： Web开发

七、控制文字的样式控制文字的样式包括文字大小写、文字修饰两个部分。 1.文字大小写文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。基本格式如下: text-transform: 参数参数取值范围: ·uppercase:所有文字大写显示 ...

玩转CSS CSS精彩实例教程(一)

标签： Web开发

CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐! 前言 ...

查看更多精彩>>