用透明背景色遮盖背景图像

我想在背景图像上放置一个透明的蓝色背景色，但我似乎无法获得覆盖图像的颜色。用透明背景色遮盖背景图像

UPDATE：我改变了边距，使名称占用了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，因为它会影响到网页上的所有div和使用，而不是标签名类设置这些属性

来源

2013-08-20 00:30:38 amdorra

我知道这工作在我张贴的演示，但即使使用完全相同的代码，它也不在我的真实例子中。任何理由？ – Keven

我更新了问题以反映您的更改。我怎样才能覆盖边缘？ – Keven

@Keven我更新了我的答案，检查新的小提琴。 – amdorra

用透明背景色遮盖背景图像

回答

相关问题