Обложка фонового изображения с прозрачным фоном-цветом

Я хотел бы поместить прозрачный синий цвет фона на фоновое изображение, но я не могу заставить цвет накладываться на изображение.Обложка фонового изображения с прозрачным фоном-цветом

ОБНОВЛЕНИЕ: Я изменил поля так, чтобы имя занимало 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; 
    }

FIDDLE:http://jsfiddle.net/dQy8A/2/

источник

2013-08-20 Keven

проверить это fiddle, я надеюсь, что это помогает.

я добавил DIV внутри вашего тела

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

и установить его цвет фона background: rgba(0,0,255,0.5);, где последнее число непрозрачность цвета

нового Css

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

вы должны удалите поля с div.overlay, и он будет работать

Я также обновил ссылку

P.S. Вы не должны устанавливать такие свойства, как width и height и display к div, как это будет влиять на все дивы на странице и использовать классы вместо имен тегов, чтобы установить эти свойства

источник

2013-08-20 00:30:38 amdorra

Я знаю, что это работает в демо я отправил, но это не на моем реальном примере даже с тем же кодом. Почему? – Keven

Я обновил вопрос, чтобы отразить ваши изменения. Как я могу накладывать поверх полей? – Keven

@ Keven Я обновил свой ответ, проверил новую скрипку. – amdorra

Обложка фонового изображения с прозрачным фоном-цветом

ответ

Смежные вопросы