css - 背景图片+媒体查询

标签 css background media-queries

我现在正在为媒体查询而苦苦挣扎。我的元素存储在这里:http://colorfill.pl/clients/ratuszowa

正如您在顶部看到的那样,有一张巨大的照片作为主要的顶部元素之一。我想要实现的是始终保持 100% 的形象。我做了一个真正的虚拟方法。我把照片分成几个文件(每个文件都有自己的宽度)。但是当我想把它放入媒体查询时,问题就出现了。

我为这样的分辨率准备了照片(现在只显示屏幕宽度): 768 1024 1280 1360 1440 1600 1920 2048 2560 就像我提到的——每个分辨率都会有自己的 img。我试过这样的东西: @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 1280px) { } 但图像显示仍然相同 - 最小的。我做错了什么?

最佳答案

对不起,我没有时间来测试这样的东西,因为只有在测试之后我才能得出任何结论,但是如果您将这些图像用作整页背景,请尝试查看这些链接,并且您的 CSS 技能达不到要求。

1。 <强> http://css-tricks.com/perfect-full-page-background-image/

2。 <强> http://css-tricks.com/how-to-resizeable-background-image/

关于css - 背景图片+媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11913030/

相关文章:

html - 如何拉伸(stretch) md-nav-item Angular Material

javascript - 添加类定义的不透明度不会影响 Webkit 中的元素

javascript - jQuery 和 JS 函数未正确加载到页面中

html - 如何在流体布局中固定高度?

javascript - 在不对脚本中的断点宽度进行硬编码的情况下使用 JavaScript 检测动态媒体查询?

html - 图片上的 Z 索引?

css - 如何使此背景在整个屏幕上水平重复?

javascript - 更改切换按钮后面主体的背景颜色和不透明度

wpf - Powershell WPF表单将文本框背景更改为图像

css - 应在每个屏幕分辨率下调整内容,而无需编写媒体查询