Sự cố với CSS Box-Shadow: Inset trên ảnh

Question

Tôi đang cố gắng sao chép hiệu ứng 'Làm mờ nét ảnh' của CSS, detailed on Trent Walton's site.

.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; 
} 

Nó hoạt động tốt trong sự cô lập, nhưng có vấn đề về địa điểm sản xuất của tôi, nơi các thiết lập nền tảng cho cha mẹ div ghi đè lên z-index vào hình ảnh - sống jsFiddle demo here.

Cách tiếp cận thứ hai - được đề cập trong các nhận xét của bài viết gốc và được đưa vào bản trình diễn - hoạt động tốt, nhưng hình ảnh của tôi phải được bao bọc trong thẻ - nó không thể ở dưới nó.

Answer 1

cuối cùng tôi thấy 'Overlay & Inset Phương pháp', thứ hai của Jordon Dobsons's techniques là hiệu quả nhất và ít nhất phụ thuộc vào tiêu cực z-chỉ số:

/* 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 sử dụng bố cục gốc)

Answer 2

trang có nền trắng chắc chắn, bạn cho hình ảnh chỉ mục z là -1, vì vậy nó sẽ nằm bên dưới div đó. Có một số cách giải quyết, tùy thuộc vào cách thiết kế cuối cùng của bạn sẽ trông, nhưng nếu bạn chỉ cần đảm #page minh bạch hoạt động:

http://jsfiddle.net/tA8EA/

Hoặc bạn cũng có thể đặt trang đến vị trí realtive và cung cấp cho nó một thấp z-index hơn hình ảnh: http://jsfiddle.net/PEgBv/

Answer 3

Tôi đã đăng câu trả lời với danh sách hình ảnh động đang tải here. Thay vì hình ảnh được lập chỉ mục dưới z chỉ có các DIV có kích thước hình nền và hình ảnh được đặt.