CSS中的background-repeat属性用于水平和垂直重复背景图像。它还决定是否重复background-image。
用法
background-repeat:repeat|repeat-x|repeat-y|no-repeat|initial|
inherit;
属性值
重复:此属性用于水平和垂直重复背景图像。如果最后一个图像不适合浏览器窗口,则会被裁剪。
用法:
element {
background-repeat:repeat;
}
例:
background-repeat propertybody {
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 propertybody {
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 propertybody {
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 propertybody {
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