Question

我根据here的响应式Red-Andy主题this site，在标题中为redmine编写主题标题。

我在头部添加了徽标，但如果网站的宽度太窄，则标题会移动到徽标上。

如果网站取消一定宽度，我该如何将此徽标半透明和灰度？

Answer 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');
    }
}

Answer 2

您需要媒体查询：

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

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

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

2 个答案: