1

背景画像の上に透明な青色の背景色を配置したいのですが、画像の上に色を重ねることができないようです。

更新:名前が 70%、マージンが 30% になるようにマージンを変更しました。ただし、2 つのマージンに重なることはありません。(更新されたフィドルを参照)

方法についてのアイデアはありますか？

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ページ上のすべての div に影響し、タグ名の代わりにクラスを使用してこれらのプロパティを設定するため、 widthandheightやなどのプロパティdisplayを a に設定しないでください。div

于 2013-08-20T00:30:38.963 に答える