css - CSS 背景画像を境界線として使用できない

Question

境界線が画像に重なるように、派手な境界線の内側に画像を配置しようとしています。私はそれをほとんど機能させています。誰かが私に必要な最後の少しを与えてくれることを願っています. 以下のサンプルでは、​​メインの div コンテナーから背景を削除すると、画像のフレーミングがうまく機能します。背景があると、画像は見えなくなり、おそらく白いコンテナの背景の後ろに隠れます。テスト用のダブラットは次のとおりです。http://dabblet.com/gist/4356232

<style>
div {
    background: #fff;
}
a {
    width: 287px;
    height: 142px;
    display: block;
    position: relative;
    background: url(http://divisioncamera.erentalpro.com/web/list.png) no-repeat;

}
img {
    position: absolute;
    max-height: 287px;
    max-width: 142px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: -1;
}
</style>
<div>
    <a>
        <img src="http://placekitten.com/300/300"/>
    </a>
</div>

Answer 1

追加div

position: relative;
z-index: 1;