代码之家 › 专栏 › 技术社区 › Sam

css:如何稍微放大背景图像

background-image frontend web css html

Sam · 技术社区 · 6 年前

我所查到的每件事 animations 或 how to 完全放大

前任。

#zoomOut {
    width: 200px;
    height: 200px;
    background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
    background-size: cover;
    bottom: 0;
}

<div id="zoomOut">
</div>

或者缩小背景图像。

前任。

#zoomIn {
    width: 200px;
    height: 200px;
    background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
    
}

<div id="zoomIn">
</div>

我想让图像覆盖背景,但只放大一点。

例如(运行第一个片段并查看图像中的差异。)

1 回复 | 直到 6 年前

Cam Gottschall 6 年前

我的建议是尝试使用“transform”css属性。然后,您可以给一个值“scale()”,并在括号中输入一个数字。数字越高,图像的缩放效果就越明显。好消息是你也可以使用小数。这将允许您一次只放大一点图像。看起来有点像这样…

#zoom-in {
   background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
   transform: scale(1.2);
}

你可以在这里看到一个这样做的例子 https://css-tricks.com/zooming-background-images/