用透明背景色遮蓋背景圖像

我想在背景圖像上放置一個透明的藍色背景色，但我似乎無法獲得覆蓋圖像的顏色。用透明背景色遮蓋背景圖像

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

用透明背景色遮蓋背景圖像

回答

相關問題