CSS 배경 투명도가 완전히 표시되어 있습니다.

div의 투명한 배경색을 가진 곳에서 효과를 얻으 려합니다. (이미지를 뒤에서 볼 수 있도록) 웹 사이트의 주요 내용을 중앙에 유지합니다. 창 크기 조정시에도).CSS 배경 투명도가 완전히 표시되어 있습니다.

내가 뭘하려고하는지 보여주기 위해 JS 피들 (fiddle)에서 간단한 모의 작품을 썼다. 내가 마주 치게되는 문제는 불투명도를 루트 div로 설정하면 div의 모든 자식이 그 불투명도를 얻고 그것을 쓸 수 없다는 것입니다. 나는 그것이 수정되지 않음으로 인해 작동하지 않는 바이올린에서 그것을하는 방식을 이해합니다. 그러나 어떻게하면이 효과를 얻고 크기를 조정할 때 웹 사이트를 중심으로 유지할 수 있습니까?

JS를 사용하지 않고도이 작업을 수행 할 수 있습니까? http://jsfiddle.net/7d6NY/

HTML :

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing" class="bg-image" /> 
<div class="transparency"> 
    <div class="content"> 
     THIS IS MY PAGE CONTENT 
    </div> 
</div>

CSS 노란색은 JS 바이올린을 여기에 불투명도 0.3

을 유지입니다한다 동안

마지막 노트는 JS 바이올린에 텍스트가 불투명 한해야한다 :

.transparency{ 
    background-color: yellow; 
    display: block; 
    opacity: 0.3; 
    margin: 0 auto; 
    width: 300px; 
    height: 500px; 
} 
.content{ 
    color: #000; 
    opacity: 1; 
    text-align: center; 
} 
img{ 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1920px; 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
}

출처

2014-07-20 Bojan

당신은 투명 배경 색상 rgba (more info on MDN) 값을 사용할 수 있습니다 +는 내용 뒤에 스택 있도록 이미지에 부정적인 Z- 인덱스 값을 제공하는 것을 잊지 마세요 :

DEMO

CSS :

.transparency{ 
    background-color: rgba(255, 255, 0, 0.3); /* <-- this line is modified */ 
    display: block; 
    margin: 0 auto; 
    width: 300px; 
    height: 500px; 
} 
.content{ 
    color: #000; 
    text-align: center; 
} 
img{ 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1920px; 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-1; /* <-- this line is added */ 
}

출처

2014-07-20 18:09:07

배경색을 만들 조건은 무엇입니까? rgba (252, 252, 0, 0.3); 작업? – Bojan

@Bagzli 특정 조건이 없으면 rgba 색상이 opacity http://caniuse.com/css3-colors와 같은 IE8에서 지원되지 않음을 알고 싶을 수 있습니다. –

.transparency { 
background-color: rgba(255, 255, 0, 0.4);  
display: block; 
margin: 0 auto; 
width: 300px; 
z-index: 10000; 
position: relative; 
height: 500px; 
} 

.content { 
color: #000; 
text-align: center; 
}

실습 데모; http://jsfiddle.net/7LNS4/

출처

2014-07-20 18:06:49 Jay

이 N했다 ot work – Bojan

내 코드를 업데이트했습니다.이 코드를 사용해보십시오. js 바이올린에서 작동합니다. – Jay

"RGBa"값이있는 배경색이 도움이됩니까?

.content{ 
    background-color:rgba(255,255,0,0.3); 
    color: #000; 
    opacity: 1; 
    text-align: center; 
}

출처

2014-07-20 18:07:36 Poupy

CSS 배경 투명도가 완전히 표시되어 있습니다.

답변

관련 문제