HTML/CSS - 帶有圖片的十字形狀

Question

我用css創建了一個十字形狀。現在我想寫一張照片，問題在於，十字架包含之前：和之後：div，因此無法在其中插入圖片。

這裏是我的jsbin： http://jsbin.com/iYogaCE/1/edit

我怎麼能解決的呢？還是有另一種解決方案來創建這樣的形狀？

在此先感謝！

Answer 1

在#cross:before, #cross:after

#cross { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

#cross:before, #cross:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    background-size:100px 100px; 
    background-image:url('http://www.gm-consult.de/uploads/pics/homer-simpson_20.jpg'); 
    background-position:center; 
} 

#cross:before { 
    left: 50%; 
    width: 30%; 
    margin-left: -15%; 
    height: 100%; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
} 

#cross:after { 
    top: 50%; 
    height: 30%; 
    margin-top: -15%; 
    width: 100%; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
}