css中的background-repeat属性怎么用

发布时间:2022-02-25 13:50:57 作者:小新
来源:亿速云 阅读:199

这篇文章主要介绍css中的background-repeat属性怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  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属性的使用示例

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8">

  <title>菜鸟教程(runoob.com)</title>

  <style>

  .demo1{

  width:400px;

  height:150px;

  border:1pxsolidred;

  background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

  background-repeat:repeat;

  }

  .demo2{

  width:400px;

  height:100px;

  border:1pxsolidred;

  background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

  background-repeat:no-repeat;

  }

  .demo3{

  width:400px;

  height:150px;

  border:1pxsolidred;

  background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

  background-repeat:repeat-x;

  }

  .demo4{

  width:400px;

  height:400px;

  border:1pxsolidred;

  background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

  background-repeat:repeat-y;

  }

  </style>

  </head>

  <body>

  <h4>repeat设置背景图片向垂直和水平方向重复</h4>

  <divclass="demo1"></div>

  <h4>no-repeat设置背景图片不重复</h4>

  <divclass="demo2"></div>

  <h4>repeat-x设置背景图片向水平方向重复</h4>

  <divclass="demo3"></div>

  <h4>repeat-y设置背景图片向垂直方向重复</h4>

  <divclass="demo4"></div>

  </body>

  </html>

以上是“css中的background-repeat属性怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css中background-repeat属性如何使用
  2. background-repeat属性的用法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:开发短视频小程序能为商家带来哪些价值

下一篇:css中如何设置4个圆角

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》