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

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

background-image frontend web css html

Sam · 技术社区 · 5 年前

我所查到的每件事 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 回复 | 直到 5 年前

Cam Gottschall 5 年前

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

推荐文章

Bear Bile Farming is Torture · 如何让div在溢出时水平滚动文本,而不是插入新行

2 年前

lucasferreira96 · 我可以同时使用Python和PHP吗?[已关闭]

3 年前

Tomas Gil Amoedo · 为什么我的形象没有触及这一边的边界?

3 年前

Hm Elius Hossain Himel · 为什么我们要在HTML5的body元素中写header和footer元素?

3 年前

Mateus Lima · 我怎么修?我需要一个透明的导航栏

3 年前

Mays Majeed · 安慰性反应

3 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

3 年前

minsu123 · 如何解析react中的单个引用?

3 年前

Lautaro Rojas · 如何使用css有意地包装元素?

3 年前

Noob · 尝试访问React对象

3 年前