0

http://jsfiddle.net/vrJr9/

上記のjsfiddleでは、私の影が良くないことがわかります.cssでコメントを編集しました。ここで、コメントを外して、コンテンツでどのように見えるかを確認できます:url()。私は現在、2 つのジレンマを抱えています。最初に content: url() を使用して正しい外観を得ることができますが、その後、黒い画像が覆われます。または、background: url() を使用することもできます。黒いプレースホルダー画像は覆われませんが、透明な影はがらくたのように見えます。問題の 1 つを修正できれば、問題ありません。

コードは次のとおりです。

<div class="list_carousel">
    <ul id="foo2">
        <li>
          <a href="#"><img src="http://dummyimage.com/158x228/000/fff.png"></a>
        </li>
    </ul>
    <div class="clearfix"></div>    <a id="prev2" class="prev" href="#"><img src="image/images/carousel_control_03.png"/></a>
    <a id="next2" class="next" href="#"><img src="image/images/carousel_control_05.png"></a>

    <div id="pager2" class="pager"></div>
</div>

CSSは次のとおりです。

.list_carousel {
    background-color: #fff;
    margin: 0 76px 30px 76px;
    width: 808px;
}
.list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    background-color: #fff;
    border: 5px solid #fff;
    width: 180px;
    height: 250px;
    padding: 0;
    margin: 6px;
    display: block;
    float: left;
    background: url(http://i.imgur.com/jahcmyA.png) no-repeat 50% 100%;
    /* content: url(http://i.imgur.com/jahcmyA.png) */
}
4

1 に答える 1

0

わかりました、background: url (); を使用すると透明度が低くなる理由がわかりました。それは、すべてを切り取る 5 ピクセルのボーダーがあるため、透明度が四角いエッジのように見え、挿入しようとしていた写真が大きすぎたためです。これら 2 つの設定を調整すると、すべてがきれいで見栄えがよくなります。

于 2013-08-22T18:35:33.810 に答える