css - 根据页面宽度更改背景图像不透明度

Question

我根据响应式 Red-Andy 主题为 redmine 编写了一个标题中带有 Logo 的主题 here对于 this site .

我在头部添加了一个 Logo ，但如果网站的宽度太窄，标题就会移到 Logo 上方。

一旦网站 ungermines 达到一定宽度，我如何才能使此 Logo 半透明并处于灰度？

Answer 1

您可以使用 CSS 媒体查询并将不透明度设置为 0.5，并将 Logo 图像更改为灰度图像。

假设您在此标记中有 logo.png(默认 Logo )和 logo-gray.png(灰度 Logo ):

<div id="logo">
    <img src="path/to/logo.png" />
    <h1>Title</h1>
</div>

CSS:

@media (max-width: 768px) {
    div.logo > img {
        opacity: 0.5;
    }
}

jQuery

$(window).resize(function() {
    var width = $(window).width();
    var img = $('div.logo > img');
    if (width < 768) {
        img.attr('src', 'path/to/logo-gray.png');
    } else {
        img.attr('src', 'path/to/logo.png');
    }
});

编辑(仅 CSS)

只需创建另一个灰度和不透明度为 0.5 的 Logo 并替换背景

@media (max-width: 768px) {
    header {
       background-image: url('path/to/logo-gray-opacity.png');
    }
}