在页面宽度上更改背景图像不透明度
问题描述:
我使用响应式Red-Andy主题here(this site)为标题中的徽标编写了redmine主题。在页面宽度上更改背景图像不透明度
我在头部添加了一个徽标,但是如果网站的宽度太窄,标题会移到徽标上。
我怎样才能让这个标志半透明和灰度一旦网站ungermines一定的宽度是多少?
答
您可以使用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');
}
}
答
您将需要媒体查询本:
@media(max-width 250px) {
.yourSelector{
//css-code
}
}
希望有所帮助。下次请提供实际的代码。
在[我的网站](http://issues.freifunk.in-kiel.de/)的标志是一个背景图片,所以我可以添加像@media(max-width:768px){0} } }'但这会改变标题中的所有内容。 – rubo77 2014-12-03 08:37:31
现在我添加了@media(max-width:768px){ #header { padding-left:0; background:none; } }'因此在屏幕上没有小于768像素的背景图像 – rubo77 2014-12-03 08:38:09
您可以在背景图像中放置一个div,用于将标识保存在标题内,因此将不透明度设置为0.5仅适用于此分辨率 – kapantzak 2014-12-03 08:41:03