如何用CSS设置背景图片只占元素一半位置？

Question

如何用CSS设置背景图片只占元素一半位置？ 在实际开发中，我们常需要将背景图片限制在元素的特定区域，比如只占据一半位置。实现这一效果的关键在于合理使用CSS属性。首先，通过`background-size`设置背景图片大小，例如`50% auto`让图片宽度为容器的一半。接着利用`background-position`调整图片位置，如`left center`或`right center`，确保图片对齐到目标区域。如果希望背景图仅显示在指定区域而不重复，需添加`background-repeat: no-repeat;`。此外，结合伪元素（如`::before`或`::after`），可以更灵活地控制背景图片布局，同时保持原有内容结构不受影响。这种技术广泛应用于按钮、卡片等UI组件设计中，提升视觉效果的同时保证功能完整性。