css背景图裁切

2023-12-21 14:30:18 举报文章

在进行网页设计时,往往需要使用到背景图,但是图片的尺寸和页面的尺寸总是会有差异,此时我们需要使用 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> 

我们可以根据自己的需求选择合适的方式进行裁切,这样可以让网页更加美观和完美。

如果你认为本文可读性较差,内容错误,或者文章排版错乱,请点击举报文章按钮,我们会立即处理!