关于背景裁剪与背景大小的个人总结

最新推荐文章于 2023-06-12 15:54:30 发布

原创最新推荐文章于 2023-06-12 15:54:30 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了网页设计中背景裁剪（background-clip）与尺寸调整（background-size）的使用方法，包括从不同区域裁剪背景、设置背景图片的宽度与高度，帮助开发者更灵活地定制页面视觉效果。

背景裁剪 background-clip

提醒一点：background默认从左上角开始覆盖，包括边框

1. border-box(默认)：从border区域想外裁剪背景。
2. padding-box:从padding区域向外裁剪背景。
3. content-box:从content(内容)区域向外裁剪背景。

在设置背景的时候可以方便的根据需求裁剪背景图

背景尺寸(图片缩放) background-size

1. 宽：百分比% or 像素px
2. 高：一般为固定像素点px

设置全局背景图片的时候非常方便，可以更具自身的需要随意更改背景大小