CSS：如何仅略微放大背景图像

Question

我正在查找的所有内容都在谈论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>

我希望图像覆盖背景，但是只放大一点。

示例。（运行第一个摘要并查看图像中的差异。）

Answer 1

我的建议是尝试使用'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/

看到此操作的示例