페이지 너비에 반응하는 배경 이미지 불투명도 변경

this site에 대한 반응 형 Red-Andy 테마 here을 기반으로 헤더에 로고가있는 redmine 테마를 프로그래밍합니다.페이지 너비에 반응하는 배경 이미지 불투명도 변경

머리에 로고를 추가했지만 사이트의 너비가 너무 좁아지면 제목이 로고 위로 이동합니다.

는

어떻게 사이트를 한 번에이 로고 반투명와의 그레이 스케일이 일정 폭을 ungermines 할 수 있습니까?

2014-12-03 rubo77

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)

그냥 배경에

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

출처

2014-12-03 08:23:36 kapantzak

0.5의 그레이 스케일 및 불투명도에 다른 로고를 만들고 교체 [내 사이트] (http://issues.freifunk.in-kiel.de/) 로고는 배경 이미지입니다 그래서 @ @ 미디어 (최대 너비 : 768 픽셀) { #header { opacity : 0.5; } }하지만 헤더의 모든 내용이 변경됩니다. – rubo77

이제'@media (최대 너비 : 768px) { #header { 패딩 왼쪽 : 0; 배경 : 없음; } }'768px보다 작은 화면에는 배경 이미지가 없습니다. – rubo77

로고를 포함하는 div를 머리글 내부의 배경 이미지에 배치 할 수 있으므로이 div에만 0.5의 불투명도를 설정하십시오. – kapantzak

이를 위해 미디어 쿼리가 필요합니다 도움이

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

희망을. 다음에 실제 코드를 입력하십시오.

출처

2014-12-03 08:23:29

페이지 너비에 반응하는 배경 이미지 불투명도 변경

답변

관련 문제