html - 使响应式背景图像在设备间保持一致

标签 html css responsive-design background-image

作为一个相对初学者,我似乎很难在基于内容而不是特定设备创建媒体查询之间找到适当的平衡。

我现在正在努力处理一个着陆页,该页面的 CSS 背景图像覆盖了整个视口(viewport)。为了确保图像在所有移动设备上保持一致(即不裁剪),我开始编写基于设备的媒体查询,每个媒体查询加载不同版本的图像。当我为四种不同的 iPhone(纵向和横向)创建它们时,警钟已经响起。

是否有更好的方法来实现我正在尝试做的事情,或者我应该接受图像在不同设备上的外观不同?

感谢所有帮助。

史蒂夫

最佳答案

http://sixrevisions.com/css/responsive-background-image/

body {
  background: url(background-photo.jpg) center center cover no-repeat fixed;
}

这在所有设备上看起来应该都比较好。

关于html - 使响应式背景图像在设备间保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31612913/

相关文章:

javascript - 设置选取框标签文本的初始位置

css - Sass - map-get 和简单变量有什么区别?

html - 为什么表行中的图像不能在 ios 邮件上并排呈现?

jquery - 响应式灯箱

javascript - 在不同的下拉菜单中使用数组中的相同值

javascript - 在 Internet Explorer 中添加对隐藏元素的选择会引发错误

javascript - Angular 指令修改范围,但不在 setTimeout 之后

html - 将文本与表格和/或 div 重叠

html - Bootstrap 和 Leaflet 集成

html - 如何居中并响应一排div