1

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

更新：我更改了边距，使名称占 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/

4

1 回答 1

1

检查这个小提琴，我希望它有帮助。

我在你体内添加了一个 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它将起作用

我也更新了链接

PS你不应该设置属性，如widthandheight和displayadiv因为它会影响页面上的所有 div 并使用类而不是标签名称来设置这些属性

于 2013-08-20T00:30:38.963 回答