2016-02-09 117 views
1

試圖在圖像上放一個陰影,我需要把:before或:after放在父元素後面才能使其工作。任何建議都會很棒。:之前僞元素絕對定位父

.g-w-a { 
    background-repeat: no-repeat; 
    display: block; 
    height: 240px; 
    position: absolute; 
    width: 160px; 
    background-color: rgba(255, 0, 0, 0.5); 
} 

.g-w-a::after { 
    background-color: rgba(0, 0, 0, 1); 
    content: ""; 
    height: 20px; 
    left: 40px; 
    position: absolute; 
    top: 210px; 
    width: 50px; 
    z-index: -2; 
} 

<div style="background-image: url(http://static.soliaonline.com/a/ae4329867a01e99b6b8ddbeb3d1c6f03.png)" class="g-w-a"><div class="t-shad">Rasen</div></div> 

https://jsfiddle.net/bunzons9/1/

+0

你想放陰影圖像還是落後的形象呢? – kanudo

+0

您不能將元素放置在元素本身下方的另一個元素內。 –

回答

1

.g-w-a { 
 
     background-repeat: no-repeat; 
 
     display: block; 
 
     position:relative; 
 
     height: 240px; 
 
     width: 160px; 
 
     background-color: rgba(255, 0, 0, 0.5); 
 
    } 
 
    
 
    .g-w-a::after { 
 
     background-color: rgba(0, 0, 0, 1); 
 
     content: ""; 
 
     height: 240px; 
 
     width: 160px; 
 
     left: 10px; 
 
     top: 10px; 
 
     position: absolute; 
 
     z-index: -2; 
 
    }
 
 
    <div style="background-image: url(http://static.soliaonline.com/a/082b36bc93e690cfda70e57e7eb86dac.png)" class="g-w-a"><div class="t-shad">Rasen</div></div>

相關問題