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/

CSS: 如何只稍微放大背景图像

CSS: How to zoom in the background-image only slightly

html

css

background-image

css-transforms