网站首页/网页设计列表/内容

背景图片重复css background-repeat属性

网页设计2023-06-12阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

【实例介绍】

背景图片重复css background-repeat属性

使用background-repeat属性可以设置背景图像是否平铺,并且可以设置如何平铺。

【基本语法】

background-repeat:取值

【语法介绍】

no-repeat表示背景图像不平铺;repeat表示背景图像平铺排满整个网页;repeat.x表示背景图像只在水平方向上平铺;repeat—Y表示背景图像只在垂直方向上平铺。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> body {  font-size: 13px;  line-height: 20px;  background-image: url(bg.jpg);  background-repeat: repeat-x} </style> <body > <p>六月里,我们相遇。</p> <p>六月里,我们再次离开。</p> <p>这是个属于梦想飞翔的年纪,也是属于享受甜蜜的时光。</p> <p>年轻是我们的资本,是我们的骄傲,是我们的流觞,更是我们心底最柔软的温馨……</p> </body> </html>

【代码分析】

使用background.repeat:repeat—x将背景图像设置为横向重复排列,在浏览器中预览效果。如图所示。

背景图片重复background-repeat运行效果
 【素材及源码下载】

请点击:背景图片重复css background-repeat 下载本实例相关素材及源码

 


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读