CSS background-repeat属性
作用:设置是不是及怎样反复背景图象。
基础语法:
background-repeat:repeat|repeat-x|repeat-y|no-repeat;
repeat:默认值,背景图象将向垂直和程度方向反复。
repeat-x:只要程度位置会反复背景图象。
repeat-y:只要垂直位置会反复背景图象。
no-repeat:设置背景图片不会反复。
申明:background-repeat 属性定义了图象的平铺形式。从原图象最先反复,原图象由 background-image 定义,并依据 background-position 的值安排。
CSS background-repeat属性的运用示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .demo1{ width: 400px; height: 150px; border: 1px solid red; background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png'); background-repeat:repeat; } .demo2{ width: 400px; height: 100px; border: 1px solid red; background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png'); background-repeat:no-repeat; } .demo3{ width: 400px; height: 150px; border: 1px solid red; background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png'); background-repeat:repeat-x; } .demo4{ width: 400px; height: 400px; border: 1px solid red; background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png'); background-repeat:repeat-y; } </style> </head> <body> <h3>repeat设置背景图片向垂直和程度方向反复</h3> <div class="demo1"></div> <h3>no-repeat设置背景图片不反复</h3> <div class="demo2"></div> <h3>repeat-x设置背景图片向程度方向反复</h3> <div class="demo3"></div> <h3>repeat-y设置背景图片向垂直方向反复</h3> <div class="demo4"></div> </body> </html>
效果图:
以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。
以上就是background-repeat属性怎样用的细致内容,更多请关注ki4网别的相干文章!