Question

我正在工作的网站需要一个页面来处理即将发生的一次性事件。大多数页面在模板中都有一个横幅图像，横跨页面的整个宽度。在大多数页面上，此图像仅在小屏幕上缩小。但是，在这个新页面上，它需要切换到一定宽度的不同图像。

由于这个站点在Drupal中，我对修改这个临时页面的主题有点犹豫。理想情况下，我希望能够设置默认图像，使其包含网站其余部分使用的标准区域。

如果我包含图片，那么它是否适合在小屏幕上，当图像需要切换时，在display: none;上设置<img>并将背景图像应用到容器{{1 }}？我认为这样可行，但似乎有点像解决方法。

有更好的解决方法吗？

图像区域只是嵌套在div系列中的<img>。

Answer 1

你提到的工作很容易实现。在此 FIDDLE 中，我刚刚添加了：

@media (max-width: 600px) {
    img {
        opacity:0;
    position:relative;
    z-index:-1;
    -webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
    }

只是为了进行转换，但是当您可以将背景图像添加到图像容器div时，简单显示无效。（z-index用于将图像设置在div中可能包含的任何内容之后，特别是链接）

在小屏幕上用背景图像替换图像

1 个答案: