缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开
2021-01-27 05:14
阅读：469
缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开发手册
background-sizeCSS属性使得它可以调整背景图像的宽度和高度，从而覆盖在它们的全尺寸瓷砖背景图片的默认行为。您可以根据需要向上或向下缩放图像。
平铺一个大的图像
让我们考虑一个大的图像，一个2982x2808火狐标志图像。我们希望（出于某种原因可能涉及恐怖的不良网站设计）将这个图像的四个副本拼贴成一个300x300像素的元素。要做到这一点，我们可以使用background-size150像素的固定值。
HTML
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;
结果如下：
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开
文章链接：http://soscw.com/essay/47609.html
文章标题：缩放背景图像 | CSS Background and Borders: Scaling background images (Backgrounds & Borders) - CSS 中文开
文章链接：http://soscw.com/essay/47609.html
评论
亲，登录后才可以留言！