0

背景画像付きの順序付けられていないリストを使用して、スプライト ナビゲーション メニューを作成したいと考えています。このメニューをブラウザ ウィンドウに合わせて拡張します。私のコード <img src="images/css-sprite-example.png" alt="header" />では、画面の全幅に合わせて画像を拡大縮小します。

メニューで同じ画像を使用し、メニューを拡大して画面の幅を埋めるにはどうすればよいでしょうか。

CSS を使用しています#menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;}が、100% は画像を実際のサイズにのみ拡大縮小します。

明らかに、CSS セレクターをピクセルではなくパーセントにする方法を変更する必要があります。

どうもありがとう

<head>
<style type="text/css">
#menucontainer {
    background: blue;
    text-align: center;
    height:auto;
    width:auto;
}
#menucontainer img {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    display: block;
    width: 100%;
}
#menucontainer ul {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid pink;
    display: block;
    width: 100%;
    list-style:none;
}
#menucontainerr li {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    display: block;
    width: 100%;
}
ul#menu{margin:0; padding:0; list-style:none;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:1px;}
#menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;}
    /* Home Button */
    #menu li.home{width:215px; height:52px;}
    #menu li.home a{background-position:-5px -5px;}
    #menu li.home a:hover{background-position:-5px -15px;}
    #menu li.home a.selected{background-position:-5px -25px;}
    /* About Button */
    #menu li.about{width:120px; height:52px;}
    #menu li.about a{background-position:-125px -5px;}
    #menu li.about a:hover{background-position:-125px -15px;}
    #menu li.about a.selected{background-position:-125px -25px;}
    #menu li.about a.selected:hover{background-position:-125px -35px;}
    /* Contact Button */
    #menu li.contact{width:80px; height:52px;}
    #menu li.contact a{background-position:-250px -5px;}
    #menu li.contact a:hover{background-position:-10% -15px;}
    #menu li.contact a.selected{background-position:-250px -25px;}
</style>
</head>
<body>
    <div id="menucontainer">
        <img src="images/css-sprite-example.png" alt="header" />
        <ul id="menu">  
            <li class="home"><a href="#">Home</a></li>  
            <li class="about"><a class="selected" href="#">About</a></li>  
            <li class="contact"><a href="#">Contact</a></li>  
        </ul>  
    </div>
</body>
</html>
4

1 に答える 1

0

使用する必要がある背景画像をスケーリングする場合は、 http://docs.webplatform.org/wiki/css/properties/background-sizeおよびhttps://developer.mozilla.org/en-US/docs/background-sizeを参照してください。 CSS/背景サイズ

于 2013-04-12T12:29:13.117 に答える