問題與CSS的box-shadow：圖像

插圖我試圖複製CSS「暗角」的效果，detailed on Trent Walton's site。問題與CSS的box-shadow：圖像

.vignette1 { 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    float: left; 
} 

.vignette1 img { 
    margin: 0; 
    position: relative; 
    z-index: -1; 

    width: 320px; 
    height: 247px; 
}

它運作良好的隔離，但對我的生產現場，那裏的家長背景設置DIV覆蓋的z-index圖像上的問題 - 生活的jsfiddle demo here。

第二種方法 - 在原來的文章的評論中提到，並列入演示 - 效果很好，但我的形象已經被包裹在標籤 - 它不能低於它。

來源

2011-01-24 Jon Hadley

這是最好的形容這裏的實際問題。博客隨着時間的推移而變化或被取消。如果發生這種情況，問題就變得沒有用。 – mikemaccana 2012-06-22 15:15:19

最後，我發現了「覆蓋&插圖方法」，的Jordon Dobsons's techniques第二是最有效和最依賴於負z索引：

/* Border & Vignette Setup */ 

    figure{ 
     position:    relative; 
     display:    block; 
     line-height:   0; 
     width:     500px; 
     height:     333px; 
     margin-bottom:   2em; 
     border:     1em solid #fff; 
     -webkit-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
     -moz-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
    } 

    figure::before{ 
     content:    ""; 
     position:    absolute; 
     top:     -1em; 
     bottom:     -1em; 
     left:     -1em; 
     right:     -1em; 

    } 

    figure::before, 
    figure img{ 
     outline:    1px solid #ccc;  
    } 

    figure.vignette img{ 
     z-index:    1; 
     position:    relative; 
     display:    block; 
     width:     100%; 
     height:     100%; 

    } 

/* Overlay & Inset Method */ 

    figure.overlay.inset::after{ 

    /* Mozilla Settings */ 
     -moz-box-shadow:  inset 0 0 150px rgba(0,0,0,.75);  

    /* Webkit Setting */ 
     -webkit-box-shadow:  inset 0 0 150px rgba(0,0,0,.75); 
    }

（jsFiddle demo使用原來的佈局）

來源

2011-02-01 14:04:08