css中repeat用法,CSS background-repeat用法及代码示例

CSS中的background-repeat属性用于水平和垂直重复背景图像。它还决定是否重复background-image。

用法

background-repeat:repeat|repeat-x|repeat-y|no-repeat|initial|

inherit;

属性值

重复：此属性用于水平和垂直重复背景图像。如果最后一个图像不适合浏览器窗口，则会被裁剪。

用法:

element {

background-repeat:repeat;

}

例：

background-repeat property

body {

background-image:url(

"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");

background-repeat:repeat;

background-size:200px 150px;

text-align:center;

}

GeeksforGeeks

background-repeat:repeat;

输出：

repeat-x：此属性用于水平重复背景图像。

用法:

element {

background-repeat:repeat-x;

}

例：

background-repeat property

body {

background-image:url(

"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");

background-repeat:repeat-x;

background-size:200px 150px;

text-align:center;

}

GeeksforGeeks

background-repeat:repeat-x;

输出：

repeat-y：此属性用于设置仅垂直重复的背景图像。

用法:

element {

background-repeat:repeat-y;

}

例：

background-repeat property

body {

background-image:url(

"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");

background-repeat:repeat-y;

background-size:200px 150px;

text-align:center;

}

GeeksforGeeks

background-repeat:repeat-y;

输出：

no-repeat：此属性不重复背景图像。它仅显示背景图像一次。

用法:

element {

background-image:no-repeat;

}

例：

background-repeat property

body {

background-image:url(

"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");

background-repeat:no-repeat;

background-size:400px 250px;

text-align:center;

}

GeeksforGeeks

background-repeat:no-repeat;

输出：

支持的浏览器：background-repeat属性支持的浏览器如下所示：

谷歌浏览器1.0

Internet Explorer 4.0

Firefox 1.0

Opera 3.5

苹果Safari 1.0