0

コーディングするメニューがおかしいのですが、その方法がわかりません。この100％幅のヘッダーストリップがあり、左側にロゴがあり、右側にメニューがあります。ストリップはフルスクリーンの背景を超えます。だから、穴を開けるなど、どういうわけかヘッダーストリップをトリミングするためのアクティブなリンクが必要です。より良いアイデアが得られるように画像を添付しました。ありがとう ！

これが画像です：

http://oi49.tinypic.com/166zvo0.jpg

4

1 に答える 1

0

背景の不透明度を使用する

HTML

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

CSS

body{
background:url(http://2.bp.blogspot.com/-C4Py3QDewmA/Td8HQzGhbcI/AAAAAAAAALU/BeVowacOJiA/s320/brick_wall.jpg) left top 
}
li{
    display:inline-block;
    padding:10px;
    border:1px solid black;
    float:left;
   background: rgba(255,255,255,0.60);
}
li:hover{
    background:none
}
a{
    color:white; font-weight:bold;
    text-decoration:none
}

デモ

于 2013-03-21T10:19:42.630 に答える