用透明背景色覆蓋背景圖片

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;
    }

內容： http : //jsfiddle.net/dQy8A/2/

Answer 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，您不應設置width和height等屬性並display為div ，因為它將影響頁面上的所有div，並使用類而不是標記名來設置這些屬性

用透明背景色覆蓋背景圖片

問題描述

1 個解決方案

解決方案1
1 已采納 2013-08-20 00:30:38

用透明背景色覆蓋背景圖片

問題描述

1 個解決方案

解決方案1 1 已采納 2013-08-20 00:30:38

解決方案1
1 已采納 2013-08-20 00:30:38