在进行网页设计时,往往需要使用到背景图,但是图片的尺寸和页面的尺寸总是会有差异,此时我们需要使用 CSS 技术进行裁切。
CSS 背景图裁切主要有两种方式:
方式一:利用 background-size 属性裁切
background-size:100% auto; // 以宽度为基准缩放 background-size:auto 100%; // 以高度为基准缩放 background-size:100% 100%; // 以宽高最小值为基准等比缩放 background-size:cover; // 保持比例同时填充整个容器 background-size:contain; // 保持比例不超过容器,图像可以显示部分空白。 </ pre>方式二:利用 background-position 属性裁切
background-position: 0 0; // 定位到左上角 background-position: 50% 50%; // 定位到中间位置 background-position: 100% 100%; // 定位到右下角 background-position: x% y%; // 定位到指定坐标位置 </ pre>我们可以根据自己的需求选择合适的方式进行裁切,这样可以让网页更加美观和完美。