CSS 响应式背景图片
CSS responsive background-image
我刚开始使用响应式设计，刚刚使用 img 标签构建了这个非常基本的 "responsive" 图像序列 http://goo.gl/iMGRkL。
现在我尝试做同样的事情，但使用背景图像而不是图像标签。
没有Javascript可以吗？我尝试了几种不同的方法，包括这个 http://goo.gl/AstSdl，但到目前为止运气不好。
提前致谢。
如果您使用 css 属性 "background" 或 "background-image"，一个好的方法是给特定的背景图像一个 parent 例如 header、div 或部分。然后你可以使用 css 值 "center" 使其在 parent 容器中居中，并使用 "cover" 使图像覆盖 parent div容器。您还可以在此处使用像素值和百分比值。另一件非常重要的事情是在 css 中将背景重复设置为 "no-repeat"，这样它就不会重复。此代码将使图像以任何宽度或高度覆盖 parent 容器。
例如：background: #ffa949 url('example.jpg') no-repeat center / cover;
这样做之后，图像可能看起来仍然有点变形，因此添加一些媒体查询可能仍然是个好主意。
我刚开始使用响应式设计，刚刚使用 img 标签构建了这个非常基本的 "responsive" 图像序列 http://goo.gl/iMGRkL。
现在我尝试做同样的事情，但使用背景图像而不是图像标签。
没有Javascript可以吗？我尝试了几种不同的方法，包括这个 http://goo.gl/AstSdl，但到目前为止运气不好。
提前致谢。
如果您使用 css 属性 "background" 或 "background-image"，一个好的方法是给特定的背景图像一个 parent 例如 header、div 或部分。然后你可以使用 css 值 "center" 使其在 parent 容器中居中，并使用 "cover" 使图像覆盖 parent div容器。您还可以在此处使用像素值和百分比值。另一件非常重要的事情是在 css 中将背景重复设置为 "no-repeat"，这样它就不会重复。此代码将使图像以任何宽度或高度覆盖 parent 容器。
例如：background: #ffa949 url('example.jpg') no-repeat center / cover;
这样做之后，图像可能看起来仍然有点变形，因此添加一些媒体查询可能仍然是个好主意。