更改背景图像不透明度以响应页面宽度答案

【问题标题】：change background-image opacity responsive on page-width更改背景图像不透明度以响应页面宽度
【发布时间】：2015-01-31 16:56:24
【问题描述】：

我根据响应式 Red-Andy 主题 here 为 this site 编写了一个带有徽标的 redmine 主题。

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

一旦网站萌发了一定的宽度，我怎样才能使这个标志半透明和灰度？

【问题讨论】：

标签： css responsive-design background-image

【解决方案1】：

您可以使用 css 媒体查询并将不透明度设置为 0.5，并将徽标图像更改为另一个灰度。

假设您在此标记中有 logo.png（默认徽标）和 logo-gray.png（灰度徽标）：

<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 的徽标并替换背景

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

【讨论】：

在my site 上，徽标是背景图像，所以我可以添加类似@media (max-width: 768px) { #header { opacity: 0.5; } } 的内容，但这会改变标题中的所有内容。
现在我添加了@media (max-width: 768px) { #header { padding-left:0; background: none; } }，因此在小于 768px 的屏幕上没有背景图像
你可以在背景图片中放置一个 div 来保存你的 logo，在你的 header 里面，所以只给这个 div 设置一个 0.5 的不透明度
那行得通，但我不想更改 redmine 的源代码。模板只能是 CSS

【解决方案2】：

您需要为此进行媒体查询：

@media(max-width 250px) {
    .yourSelector{
  //css-code
    }
}

希望对您有所帮助。下次请提供实际代码。

【讨论】：