在页面宽度上更改背景图像不透明度

Question

我使用响应式Red-Andy主题here（this site）为标题中的徽标编写了redmine主题。

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

我怎样才能让这个标志半透明和灰度一旦网站ungermines一定的宽度是多少？

Answer 1

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

比方说，你已经logo.png（默认徽标）和标志 - 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'); 
    } 
}); 

EDIT（仅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 
    } 
} 

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