CSS

CSS Backgrounds and Borders: Scaling background images

CSS背景和边界:缩放背景图像

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

平铺一个大的图像

让我们考虑一个大的图像,一个2982x2808 Firefox标志图像。我们希望(出于某种原因可能涉及恐怖的不良网站设计)将这个图像的四个副本拼贴成一个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; width: 300px; height: 300px; border: 2px solid; color: pink; }

结果

拉伸图像

还可以指定图像的水平和垂直大小,如下所示:

background-size: 300px 150px;

结果如下:

放大图像

另一方面,您可以在后台缩放图像。在这里,我们将32x32像素图标缩放为300x300像素:

.square2 { background-image: url(favicon.png background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; }

正如你所看到的,CSS实际上是相同的,保存图像文件的名称。

特殊值:“"contain" and "cover"

除了<length>价值观的background-sizeCSS属性提供了两个特殊的尺寸值,contain和cover。我们来看看这些。

contain

contain值指定无论包含框的大小如何,都应缩放背景图像,以使每一边尽可能大而不超过容器相应边的长度。尝试调整下面的示例以查看此操作。

HTML

<div class="bgSizeContain"> <p>Try resizing this element!</p> </div>

CSS

.bgSizeContain { background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; }

结果

cover

cover值指定背景图像的尺寸应尽可能小,同时确保两个尺寸均大于或等于容器的相应尺寸。尝试调整下面的示例以查看此操作。

HTML

<div class="bgSizeCover"> <p>Try resizing this element!</p> </div>

CSS

.bgSizeCover { background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; }

结果