开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-position属性的用法</title> <style> .example { background-image:url('/uploads/20250507/deer.png'),url('/uploads/20250507/forest.jpg'); background-repeat: no-repeat; background-position: left top, right bottom; background-size: 80px,100%; padding: 20px; color: #ddd; } </style> </head> <body> <h1>background-position属性的用法</h1> <div class="example"> <strong>left top, right bottom（当前值）</strong>：这个值表示第一个背景图像(deer.png)将定位在元素的左上角，第二个背景图像(forest.jpg)将定位在元素的右下角。多背景图定位允许您为每个背景图像设置不同的位置，通过逗号分隔。left top将小鹿图标固定在左上角，不受元素尺寸变化影响；right bottom将森林背景图固定在右下角，会随元素尺寸变化而移动。这种定位方式特别适合需要在同一元素中组合多个背景图像的场景，比如在角落放置图标的同时设置全尺寸背景图。注意定位顺序与background-image顺序一致，第一个值对应第一张图，第二个值对应第二张图。left top, right bottom的组合常被用于创建既有固定装饰元素又有动态背景的视觉效果。多背景图定位是CSS3的强大功能，能够在不添加额外HTML元素的情况下实现复杂的图层效果。这种定位方式特别适合需要在同一元素中组合多个背景图像的场景，比如在角落放置图标的同时设置全尺寸背景图。注意定位顺序与background-image顺序一致，第一个值对应第一张图，第二个值对应第二张图。left top, right bottom的组合常被用于创建既有固定装饰元素又有动态背景的视觉效果。多背景图定位是CSS3的强大功能，能够在不添加额外HTML元素的情况下实现复杂的图层效果。 </div> </body> </html>
运行结果：
