CSS를 사용하여 "녹아웃"효과를 얻으려면 어떻게해야합니까?

업데이트 - 확신 나는 이것을 알아 냈어. 코드는 다소 길지만 소스를 볼 수 있도록 페이지를 던졌습니다. http://www.sorryhumans.com/knockout-header CSS를 사용하여 "녹아웃"효과를 얻으려면 어떻게해야합니까?

개념은 다음을 기반으로합니다 : http://algemeenbekend.nl/misc/challenge_gerben_v2.html 내 요구에 맞게 조정되었습니다.

헤더는 응답과 괴롭 혔어요. (나쁜, 1 분 반응 bg 이미지 구현을 무시하십시오!). 이 구현은 CSS3도 사용하지 않으므로 호환성 문제는별로 없을 것이라고 생각합니다.

는

I 찾은 유일한 문제는 브라우저 폭이 홀수 인 경우 (예컨대 1393px) 크롬 오른쪽 유체 열 메인 가운데 열 사이의 1 픽셀 갭이 존재한다는 것이다. 최신 버전의 Firefox, Internet Explorer에서 또는 너비가 짝수 인 경우 (예 : Chrome에서 1394 픽셀)이 문제가 표시되지 않습니다. 어떤 아이디어?

원래 질문 : 내가 설계 한 헤더를 코딩하려고하는데, 찾고있는 효과를 얻는 방법을 알 수 없습니다. (아니, 사실 내가 :) 그냥 예에서 일하고 있어요 무슨이 아니다!) 첨부 된 이미지를보고하십시오

example picture

사진은 전체 폭 반응하는 사진입니다. 헤더는 전체 너비이지만 그 내용은 임의의 크기 (검은 색 선으로 표시)를 초과하지 않는 반응 형 그리드에 있지만 크기를 줄일 수 있습니다. 나는이 모든 것을 성취 할 수 있지만, 알아 내는데 어려움을 겪고있는 것은 헤더 바가 로고가 어디에 있는지를 투명하게 만드는 방법이다. 즉, 로고를 막대 위에 놓는 대신 헤더의 "노크"하고 싶습니다.

이것도 가능합니까?

출처

2012-07-04 Sean Linehan

'.png '를 사용하면 로고를 만드는 가장 쉬운 방법입니다. – thirtydot

@Sean 무엇을 시도 했습니까? 장난감에 css '불투명도'를 보았습니까? –

이미지 사용은 내가 생각할 수있는 유일한 방법입니다. [This post] (http://stackoverflow.com/a/7626738/1405830)는 동의하는 것처럼 보이지만 SVG를 대안으로 언급합니다. 나는 다른 방법이 있는지 알기에 흥미가 있습니다. – Zhihao

녹아웃 효과에 대한 고유의 지원도 없다, 그래서 당신은 이미지의 한 부분으로 텍스트를해야합니다.

녹아웃 효과 뒤의 배경 이미지의 고체 일부가하는 것이 작업을 수행하는 가장 쉬운 방법. 녹아웃 효과를 원할 때 단색 배경과 투명도로 .png을 만들고 CSS opacity을 사용하여 전체 헤더를 부분적으로 투명하게 만들 수 있습니다. 이미지가없는 섹션은 배경색을 가지지 만 이미지가없는 섹션은 배경색을 갖지 않으려면 여러 섹션으로 헤더를 설정해야합니다.

매우 대략 :

<div id="outerHeaderWithOpacity"> 
    <div class="hasBackground">Left side, will stretch</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">As many sets as you need</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">Right side, will stretch</div> 
</div>

출처

2012-07-04 00:32:41 CheeseWarlock

이것은 내가 대략적으로 생각한 것입니다.하지만 CSS가 어떻게 생겼는지 알 수 없었습니다. 원본 이미지를 참조하면 검정색 막대 사이의 머리글 영역은 화면 크기에 관계없이 가운데에 위치해야합니다. 그 부분을 알아낼 수있게 도와 주실 수 있습니까? 지금까지 도와 주셔서 대단히 감사합니다! –

@SeanLinehan jQuery를 사용하여 너비를 설정할 수 있지만 (http://jsfiddle.net/VPU9A/) 다른 답변의 'flexbox' 메서드는 훨씬 더 우아하게 보입니다. – CheeseWarlock

http://jsfiddle.net/GZ8Xv/

하지 예쁜 용액 그러나 실험 CSS3의 인 flexbox 사용 : (대체 display: table)와

<div class="wrapper"> 
    <div class="left"><br /></div> 
    <div class="middle"><br /></div> 
    <div class="right"><br /></div> 
</div>

012,309,190,339을

참고 사항 : 인 flexbox의 W3C 사양은 아직 유동적이며, 세 번째 시간을 변경할 수 있습니다. 나는 IE9 (IE9와 IE8 모드 모두)에서만 이것을 테스트했다.IE7 모드에서는 작동하지 않음) 및 Chrome 20 및 22

몇 가지 사소한 변경 사항 : http://jsfiddle.net/GZ8Xv/2/ 및 javascript가없는 5div 레이아웃이 있습니다.

출처

2012-07-04 02:04:55

도움을 주셔서 감사합니다. 관심이 있다면 원래 게시물을 업데이트 한 CSS3을 사용하지 않는 적절한 해결책을 찾은 것 같습니다. –

@SeanLinehan 당신이 대답을 찾았 기 때문에 기쁩니다. 솔루션을 답으로 게시하고 승인 된 것으로 표시하는 것이 좋습니다. 이렇게하면 다른 사람들이 당신의 솔루션을 더 쉽게 찾을 수 있습니다. –

CSS를 사용하여 "녹아웃"효과를 얻으려면 어떻게해야합니까?

답변

관련 문제