位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > background-repeat背景图像水平或垂直平铺
阅读(22555525)      收藏       赞(5685)      分享
上一篇: background-image背景图像 下一篇: background-attachment 属性

实例:只有垂直方向重复background-image

效果图

小白教程网www.2d5.net

image.png

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>background-repeat 属性</title>

     <!--定义内部样式-->

     <style>

             body{

                      /*背景图片:默认情况下是铺满整个页面*/

                      background-image:url("img/paper.jpg");

                      background-repeat: repeat-y;/*设定只有垂直方向显示背景*/

             }

     </style>

</head>

<body>

     <p>repeat-y 设置只有垂直方向重复 background-image</p>

</body>

</html>

标签定义及使用说明

设置如何平铺对象的 background-image 属性。

默认情况下,重复background-image的垂直和水平方向,也就是背景图像水平或垂直平铺。

默认值:

repeat

继承:

no

版本:

CSS1

JavaScript 语法:

object   object.style.backgroundRepeat="repeat-y"

属性值

说明

repeat

背景图像将向垂直和水平方向重复。这是默认

repeat-x

只有水平位置会重复背景图像

repeat-y

只有垂直位置会重复背景图像

no-repeat

background-image不会重复

inherit

指定background-repea属性设置应该从父元素继承

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

image.png

IE8以及更早版本的浏览器不支持多个背景图像在一个元素。

注意 IE7和更早的版本不支持"inherit(继承)"的值。 IE8需要定义!DOCTYPE IE9支持"inherit(继承)"

提示和注释

提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景,图像总是放在元素的左上角。


上一篇: background-image背景图像 下一篇: background-attachment 属性
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)