0

私は友人のためにいくつかのコードに取り組んでいます-そして彼女は私に画像を境界線として使用してサイドバーを作成することを望んでいます-彼女は画像とすべてを提供しましたが、私の問題はcssで境界線画像コードを使用すると縮小されることです画像を非常に小さいバージョンにすると、ほとんど見えなくなります。私が持っているボーダー画像コードと関係があると思いますが、どのように微調整しても、目に見えるものに拡大することはできません。

画像を目に見えるものにするためにこのコードを微調整する必要があることを正確に理解するのを手伝ってくれる人はいますか?

HTML

<div id="sidebar">
    <ul id="sidenav">
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126546-custom-orders"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/menuFontPSDfile_zps07909da5.png" /></a>

        </li>
        <li>    <a href=""><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/DesignSeries_zps3a1baebc.png" /></a>

        </li>
        <li>    <a href=""><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/DecodenCases_zps369ccf66.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/183038-nails"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Nails_zpsc77c5d0e.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/183036-necklaces"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Necklaces_zps983a23c8.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/258653-bracelets"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Bracelets_zps9a4c3f9b.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126552-charms"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Charms_zps7a802dc8.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126549-rings"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Rings_zps46bcfc13.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126550-key-chains"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/KeyChains_zps9e30ffa2.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126551-hair-clips"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/HairClips_zpse1e4a75f.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/203043-sale"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Sale_zps8bedfa19.png" /></a>

        </li>
        <li>    <a href="https://docs.google.com/forms/d/1baYFoTxVinyA9afg8fhC__etLbVpZrqLTAemxt9YIYw/viewform"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/CustomOrderForm_zps6b55863d.png" /></a>

        </li>
    </ul>
</div>

CSS

#sidebar {
    -webkit-border-image: url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    -o-border-image:url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    border-image:url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    width: 209px;
    border-width:25px 30px 10px 20px padding: 15px;
}
#sidenav {
    list-style-type: none;
}

ここにjsfiddleと元の画像へのリンクがあります（そのため、どのように見えるかがわかります）

http://jsfiddle.net/8bDcE/

http://i.imgur.com/wdljzHL.png

4

1 に答える 1

0

この資産は必要background-imageありません。border-image

#sidebar {
    background-image  : url('http://i.imgur.com/wdljzHL.png');
    background-size   :cover;
    background-repeat : no-repeat;
    width             : 209px;
}
#sidenav {
    list-style-type : none;
}

http://jsfiddle.net/seancannon/3BvWf/

アセットを最大限に活用するもう 1 つの方法は、いくつかのz-index割り当てを使用imgして、親に対応するように伸縮する要素内にタグを配置することです。

<div id="sidebar">
    <img class="bg" src="http://i.imgur.com/wdljzHL.png" />
    <ul id="sidenav">
        ...

次に、CSS は次のとおりです。

#sidebar {
    width    : 209px;
    position : relative;
}
#sidenav {
    list-style-type : none;
    position        : relative;
    z-index         : 1;
}
#sidebar .bg {
    width    : 100%;
    height   : 100%;
    position : absolute;
    z-index  : 0;
}

http://jsfiddle.net/seancannon/3BvWf/1/

于 2013-09-04T23:37:45.570 に答える