CSS响应背景图像

时间:2015-07-29 23:35:39

标签: css background-image

我开始使用响应式设计,并使用img标记构建了这个非常基本的“响应式”图像序列http://goo.gl/iMGRkL

现在我正在尝试使用背景图像而不是图像标记。

没有Javascript可以吗?我尝试了一些不同的方法,包括这个http://goo.gl/AstSdl,但到目前为止没有运气。

提前致谢。

1 个答案:

答案 0 :(得分:2)

如果您正在使用css属性"背景"或" background-image",这样做的一个好方法是给特定的背景图像一个父,如标题,div或section。然后你可以使用css值" center"将它放在父容器中,并且"覆盖"使图像覆盖父div容器。您还可以在此处使用像素和百分比值。另一件非常重要的事情是将背景重复设置为" no-repeat"在你的CSS中,所以它不会重复。此代码将使图像覆盖任何宽度或高度的父容器。

ex:background: #ffa949 url('example.jpg') no-repeat center / cover;

在这样做之后,图像可能仍然看起来有点慌张,所以添加一些媒体查询可能仍然是一个好主意。