我想做的是将 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%);
}
过滤后的图像需要具有视口(viewport)的宽度,以便遵循与原始图像相同的背景尺寸封面,因此我将其放在宽度为 100% 的固定元素中。我希望它服从其祖 parent 绝对元素的溢出,这样我就可以仅将滤镜应用于图像左侧的 33%,但这不起作用。有什么想法可以实现吗?
最佳答案
如果我没理解错的话,你想调换“祖 parent ”和“ parent ”的位置:JS Fiddle
#grandparent {
position: fixed;
width: 33%; height: 100%;
overflow-x: hidden;
z-index: 1;
}
#parent {
position: absolute;
width: 100%; height: 100%;
}
关于css - 部分应用 css 图像过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22235720/