个人随笔
技术改变世界

CSS 水平或垂直重复背景图片

示例背景图片

css-bg

实现垂直/水平背景平铺

实现水平或垂直屏幕背景的关键代码background-repeat: repeat-x; 最后面的x则表示为水平方向,如果是y则表示是垂直方向。水平平铺比较常用,可以用于标题栏什么之类的。

下面来看看我们实现的最终效果吧!这里以水平平铺为例!如果需要垂直平铺的话只需要把repeat-x换成repeat-y即可,正如上面所说。

css-repeat-x

实现以上效果的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS背景图片水平平铺</title>
<style type="text/css">
body {
	background-image: url(http://www.wxzzz.com/wp-content/uploads/2014/05/css-bg.gif);
	background-repeat: repeat-x;
}
</style>
</head>

<body bgcolor="skyblue">
<span>文本内容</span>
</body>
</html>

转载请注明出处王旭博客 » CSS 水平或垂直重复背景图片

分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    喜欢简洁的教程!博主友链可好!

    陌小雨2年前 (2014-12-03)回复