투명한 배경색으로 배경 이미지 덮기

투명한 파란색 배경색을 배경 이미지 위에 배치하고 싶지만 이미지 위에 오버레이되도록 색을 표시 할 수 없습니다.투명한 배경색으로 배경 이미지 덮기

업데이트 : 이름이 70 %이고 여백이 30 %가되도록 여백을 변경했습니다. 그러나 두 마진 위에 오버레이되지 않습니다. (업데이트 된 바이올린 참조)

어떻게하면 좋을까요?

HTML :

<body> 
    <div id="name"> 
     <h1 id="h" ><a href=#>H</a></h1> 
     <h1 id="e" ><a href=#>E</a></h1> 
     <h1 id="l" ><a href=#>L</a></h1> 
     <h1 id="l2" ><a href=#>L</a></h1> 
     <h1 id="o" ><a href=#>O</a></h1> 
    </div> 
</body>

CSS :

body { 
     font-family: 'Sigmar One', cursive; 
     font-size: 75px; 
     color: white; 
     text-shadow: 5px 5px 5px #000; 

     background-color:blue; 
     background: url(http://placekitten.com/500/500) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 

     width: 100%; 
     height: 100%; 
     margin: 0; 
    } 

    div { 
     position:absolute; 
     height:100%; 
     width: 70%; 
       margin: 0 15% 0 15%; 
     display: table; 
    } 

    h1 { 
     display: table-cell; 
     vertical-align: middle; 
     text-align:center; 
     height: 1em; 
     border: 1px solid black; 
    } 

    a { 
     /*border: 1px solid black;*/ 
     display: inline-block; 
     line-height: 100%; 
     overflow: hidden; 
    } 

    a:visited, a:hover, a:active { 
     text-decoration: none; 
     color: white; 
    } 

    a:link { 
     text-decoration: none; 
     color: white; 
     text-shadow: 3px -3px 0px black; 
    } 

    a:hover { 
     text-shadow: 5px 5px 5px #000; 
     color: white; 
    }

뿐인 :http://jsfiddle.net/dQy8A/2/

출처

2013-08-20 Keven

확인이 fiddle, 나는 그것이 도움이되기를 바랍니다.

내가 몸

<div class = "overlay"> 
    <div id = "name"> 
    .... 
    </div> 
<div>

설정하고 내부 사업부를 추가 그것은 마지막 숫자가

새로운 색상 CSS

.overlay{ 
    background: rgba(0,0,255,0.5); 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
}

당신이해야의 불투명도입니다 background: rgba(0,0,255,0.5);에 배경 색상입니다 div.overlay에서 여백을 제거하면 작동합니다.

또한이 링크를 업데이트했습니다.

P.S. 당신은 페이지의 모든 div의 영향을

출처

2013-08-20 00:30:38 amdorra

나는 이것이 내가 게시 된 데모에서 작동 알고 그 속성을 설정하는 대신 태그 이름의 클래스를 사용하는 것 같은 div 그러한 width 및 height 및 display 등의 속성을 설정하지만, 안 그것은 실제 코드에서 똑같은 코드로도 내 실제 예제에 있지 않습니다. 이유가 뭐야? – Keven

변경 사항을 반영하도록 질문을 업데이트했습니다. 여백에 어떻게 오버레이 할 수 있습니까? – Keven

@Keven 나는 나의 대답을 업데이트했다. 새로운 바이올린을 확인하라. – amdorra

투명한 배경색으로 배경 이미지 덮기

답변

관련 문제