투명 내용의 정적 배경 이미지

Question

이것은 CSS 전문가에게 질문입니다. 현재 추세는 이미지를 배경에 배치 한 다음 투명한 콘텐츠를 맨 위에 스크롤하는 것으로 보입니다.

AIM 가기 콘텐츠 투명하고 배경 이미지 위에 슬라이딩이 결과를 생성하기 위해 사용되는 어떤 기술

.

http://jsfiddle.net/spadez/2uUEL/9/embedded/result/

내 시도 내가해야 할 시도 무엇

는 그 위에 상단 부분을 투명하게 다음 배경을 적용하고있다.

http://jsfiddle.net/spadez/N9sCD/3/

body { 
    background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg"; 
} 
#top { 
    height: 160px; 
    opacity:0.4; 
    filter:alpha(opacity=40); 
} 
#section { 
    height: 600px; background-color: blue; 
} 

질문 내 첫 번째 링크에서 달성 된 정적 배경 이미지 위로 이동 투명한 사업부의이 기술을 가지고 있는데 그것을 어떻게 재현 할 수있는 방법

. 그것은 자바 스크립트를 사용하지 않고도 작동하기 때문에 CSS 솔루션이어야합니다.

Answer 1

여기 z-index에 대한 필요성을 제거 .mask 내부에 배치 FIDDLE

<div id="top"> 
    <span class="mask"> 
    <img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome"> 
    <a href="#">Link 3</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 1</a> 
    </span> 
</div> 

<div class="section l"> 

</div> 

<div class="section d"> 

</div> 


#top { 
    background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed; 
    background-size: cover; 
    position: relative; 
    height: 400px; 
} 
#top a { 
    background: rgba(200,200,200,0.5); 
    display: block; 
    float: right; 
    margin: 10px 15px; 
    padding: 2px 5px; 
    text-decoration: none; 
    color: #111; 
    cursor: pointer; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    transition: color 0.2s ease-in; 
} 
#top a:hover { 
    color: #fff; 
} 
.mask { 
    background: rgba(0,187,255,0.5); /* or hex combined with opacity */ 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */ 
} 
.logo { 
    position: relative; 
    width: 60px; 
    height: 60px; 
    margin: 10px; 
} 
.section { 
    height: 600px; 
} 
.l { 
    background: #ddd; 
} 
.d { 
    background: #333; 
} 

업데이트#top 내용입니다.

Answer 2

본질적으로 건물은 정확했지만 CSS에는 오류가 있습니다. 때문에 배경없이

body { 
    background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */ 
    background-size: cover cover; /* expands bg image to cover body */ 
} 
#top { 
    height: 160px; 
    color: #fff; /* this just makes the text visible on your dark bg */ 
} 

당신은 #top의 불투명도를 설정할 필요가 없습니다은 이미 투명하게됩니다 설정합니다.

Answer 3

이 시도 : - 자신의 사업부로 메뉴를 밀어

<div id="top"> 
    <div id="menu"> 
    logo 
    link 1 
    link 2 
    </div> 
</div> 
<div id="section"> 

</div> 

CSS를 -

HTML을 고정 된 위치에 배경을 설정, 몸에서 제거 된 마진을 항상 몸 전체를 충당하기 위해 추가 배경 색상 메뉴. #top에는 기본적으로 100 % 투명하므로 투명도가 필요하지 않습니다. '색상이 씻어진'이미지를보고 싶다면 색상 오버레이를 다시 작성하는 대신 이미지 자체를 조정하는 것이 좋습니다.

body { 
    margin: 0; 
    background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed; 
    background-size: cover; 
} 
#top { 
    height: 500px; 
} 
#menu { 
    padding: 10px; 
    background-color: #fff; 
} 
#section { 
    height: 600px; background-color: blue; 
}