Question

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

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

Answer 1

检查这个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并使用类而不是标记名来设置那些属性

用透明背景颜色盖子背景图象

1 个答案: