缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders)

  CSS 中文开发手册

缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开发手册

background-sizeCSS属性使得它可以调整背景图像的宽度和高度，从而覆盖在它们的全尺寸瓷砖背景图片的默认行为。您可以根据需要向上或向下缩放图像。

平铺一个大的图像

让我们考虑一个大的图像，一个2982x2808火狐标志图像。我们希望（出于某种原因可能涉及恐怖的不良网站设计）将这个图像的四个副本拼贴成一个300x300像素的元素。要做到这一点，我们可以使用background-size150像素的固定值。

HTML

<div class="tiledBackground">
</div>

CSS

.tiledBackground {
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: 150px;
   300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

结果

拉伸图像

您还可以指定图像的水平和垂直尺寸，如下所示：

background-size: 300px 150px;

结果如下：

  本文标题：缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32173.html