css - 调整背景图像大小以适合 div

标签 css html resize hover mouseover

我有一个关于调整背景图像大小的问题。我有一个 div,它的长度根据查看网页的设备而变化。

PC: Div = 500px * 500px
Tablet: Div = 300px * 300px
Mobile: Div = 200px * 200px

我还有一张 600px * 600px 的图像。我想让这个图像填充 div 完全保持长宽比。然后,当用户将鼠标悬停在图像上时,我想创建悬停效果。这是我想要的悬停效果:

http://mijn-webwinkel.nl/test2.php

(不要介意右侧的文​​字 -> 它仅用于测试)

我在网上搜索了一个好的解决方案。有几种用于 css 悬停效果的解决方案(但都需要背景图像)和几种用于在 div 内调整大小的解决方案(但它们都需要使用非背景图像)。

是否有结合两者的解决方案?

最佳答案

背景大小:覆盖;

用于调整背景图像的大小以适应

关于css - 调整背景图像大小以适合 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11568498/

相关文章:

css - 如何获得边框折叠的 thead 和边框间距的 tbody 单元格?

html - 为什么 Angular 会清理以下代码?样式 ="margin-left: 30px"

javascript - Google Maps API v3 + Foundation 4 Reveal 模式无法正确显示

jquery - 在窗口调整大小时获取 div 的实时宽度?

html - 为什么此 WebGL 帧缓冲区使用会抛出 FRAMEBUFFER_UNSUPPORTED?

css - 菜单调整到悬停 css 上的子元素

jquery - 如何在条件查询中的类之间淡入淡出

javascript - jQuery 插件实践

javascript - 为什么 anchor 标签在 tinymce 编辑器中消失了?

javascript - 如何使用选择器通过箭头键切换元素?