css中的background-repeat属性怎么用
这篇文章主要介绍css中的background-repeat属性怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司主要从事网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务白云,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
CSSbackground-repeat属性
作用:设置是否及如何重复背景图像。
基本语法:
background-repeat:repeat|repeat-x|repeat-y|no-repeat;
repeat:默认值,背景图像将向垂直和水平方向重复。
repeat-x:只有水平位置会重复背景图像。
repeat-y:只有垂直位置会重复背景图像。
no-repeat:设置背景图片不会重复。
说明:background-repeat属性定义了图像的平铺模式。从原图像开始重复,原图像由background-image定义,并根据background-position的值放置。
CSSbackground-repeat属性的使用示例
.demo1{
width:400px;
height:150px;
border:1pxsolidred;
background-image:url('/upload/otherpic55/5c6a4428ea867709.png');
background-repeat:repeat;
}
.demo2{
width:400px;
height:100px;
border:1pxsolidred;
background-image:url('/upload/otherpic55/5c6a4428ea867709.png');
background-repeat:no-repeat;
}
.demo3{
width:400px;
height:150px;
border:1pxsolidred;
background-image:url('/upload/otherpic55/5c6a4428ea867709.png');
background-repeat:repeat-x;
}
.demo4{
width:400px;
height:400px;
border:1pxsolidred;
background-image:url('/upload/otherpic55/5c6a4428ea867709.png');
background-repeat:repeat-y;
}