开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-repeat属性的用法</title> <style> .example { background-image:url('/uploads/20250507/deer.png'); background-repeat: repeat-x; background-color: lightblue; background-size: 80px; padding: 20px; min-height: 200px; } </style> </head> <body> <div class="example"> <strong>background-repeat: repeat-x（当前值）</strong>：这个值表示背景图像会在水平方向重复排列。在这个例子中，你可以看到小鹿图标在水平方向上重复出现，并且保持原始宽度。 <p>background-repeat属性控制背景图像的重复方式，常用值包括：</p> <ul> <li><strong>repeat</strong>：在水平和垂直方向都重复</li> <li><strong>repeat-x</strong>：仅在水平方向重复</li> <li><strong>repeat-y</strong>：仅在垂直方向重复</li> <li><strong>no-repeat</strong>：不重复，只显示一次</li> <li><strong>space</strong>：重复但不裁剪，均匀分布</li> <li><strong>round</strong>：重复并拉伸以适应容器</li> </ul> </div> </body> </html>
运行结果：
