部分應用css圖像過濾器

Question

我想要做的是部分應用css過濾器背景圖像與背景大小的封面。看看http://jsfiddle.net/vFYFz/

<div id="grandparent"> 
    <div id="parent"> 
     <div id="child"></div> 
    </div> 
</div> 

<div id="original"> 
</div> 

#original { 
    position: fixed; 
    width: 100%; height: 100%; 
    background-image: url('http://userserveak.last.fm/serve/_/96476693/Natural+Mystic+JPG.jpg'); 
    background-size: cover; 
} 

#grandparent { 
    position: absolute; 
    width: 33%; height: 100%; 
    overflow-x: hidden; 
    z-index: 1; 
} 

#parent { 
    position: fixed; 
    width: 100%; height: 100%; 
} 

#child { 
    position: absolute; 
    width: 100%; height: 100%; 
    background-image: url('http://userserve-ak.last.fm/serve/_/96476693/Natural+Mystic+JPG.jpg'); 
    background-size: cover; 
    -moz-filter: invert(100%); 
    -webkit-filter: invert(100%); 
    -o-filter: invert(100%); 
    -ms-filter: invert(100%); 
    filter: invert(100%); 
} 

過濾後的圖像需要有視口的寬度，以遵循相同的背景，尺寸涵蓋原創，所以我把它與100的固定元素中％寬度。我希望它遵守其祖父絕對元素的溢出，以便我可以僅將濾鏡應用於圖像的左側33％，但這不起作用。任何想法如何我可以把它關閉？

Answer 1

如果我理解正確，你想切換「祖父母」的位置，「父」：JS Fiddle

#grandparent { 
    position: fixed; 
    width: 33%; height: 100%; 
    overflow-x: hidden; 
    z-index: 1; 
} 

#parent { 
    position: absolute; 
    width: 100%; height: 100%; 
}