0

内部ボックスの影を含む div がありますが、これらの影は別の div で覆われています。私は postion:relative で試しましたが、何も変更されません。

これが例です コード例

example-div{
    background:#fff;
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

前もって感謝します ！

4

1 に答える 1

0

あなたがする必要がある2つのこと -z-indexそれがあなたの円形のdivの後ろになるようにあなたの写真のを変更してから、白の代わりにbackgroundなるようにあなたの円形のdivを変更してください。transparent

.example-div{
    background: transparent; /*this way you can see behind the circle*/
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

.example-div img{
    width:260px;
    height:250px;
    border-radius: 100%;
    position: relative; /*needed for z-index*/
    z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}
<div class="example-div">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>

于 2015-03-24T14:16:35.020 に答える