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/

充分利用资产的另一种方法是使用一些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 回答