裁剪一個CSS所迷離背景

我試圖把一個CSS3的WebKit模糊的背景圖像上，然後將它夾（通過把它在一個較小的父母和設置overflow: hidden）裁剪一個CSS所迷離背景

不幸的是，當我這樣做，我的模糊效果只會在剪輯內容上發生，所以我的內容邊緣會明顯從模糊效果中「消失」（大概這是某種優化）。

例如HTML：

<div class="parent"> 
    <div class="child checkerboard"></div> 
</div>

CSS：

.parent { 
    width : 100px; 
    height : 100px; 
    position : relative; 
    border : 1px solid #000; 
    overflow : hidden; 
    margin : 10px; 
} 

.child { 
    -webkit-filter : blur(5px); 
    width   : 200px; 
    height   : 200px; 
    position  : absolute; 
    top   : -60px; 
    left   : -60px; 
} 

.checkerboard { 
    background : url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Checkerboard_pattern.svg/220px-Checkerboard_pattern.svg.png'); 
}

如果我使用<img>而不是CSS背景，它按預期工作（jsfiddle）

在我住的應用程序

不幸我不能輕鬆切換到<img>標籤，所以我想弄清楚如何讓這個與背景圖片一起工作。

來源

2014-01-20 Mark Kahn

進行實驗，它採用父級的背景，並將該顏色添加爲邊緣模糊。 – Ruskin

@Ruskin - 實際上它使孩子變得透明（這在我的實際應用中非常明顯，因爲它在地圖上，並且你可以通過模糊看到隱藏的部分） –

啊，有我跳到結論！有趣的問題。 – Ruskin

不知道爲什麼或如何，這個工程（至少在我的Chrome）：

.child { 
    -webkit-filter : blur(5px); 
    width   : 200px; 
    height   : 200px; 
    position  : absolute; 
    top   : -60px; 
    left   : -60px; 
    -webkit-transform: rotate(0deg); 
}

updated fiddle

來源

2014-01-20 16:45:09 vals

也適用於我。好找！ – Ruskin

快樂，它幫助！ – vals

很好找，謝謝！ :)'-webkit-transform：任何東西都會將元素踢入硬件加速，並且在混合渲染模式（GPU加速與非加速項目）中圍繞不同元素存在一系列問題。所以我猜這裏發生了兩件事情之一：-webkit-filter'不是GPU加速的，因此需要兩步渲染。或者它和'-webkit-transform'本質上是創建一個新的「堆疊上下文」（而模糊不是出於某種原因）。無論哪種方式，再次感謝 –

只有我有它的工作方式是鋪設在上面的絕對定位的剪貼蒙版：

http://codepen.io/anon/pen/sjHEr

<div class="wrapper"> 
<div class="parent"> 
    <div class="child checkerboard"></div> 
</div> 
</div> 

<div class=clip></div> 

.clip { 
    border:20px solid #FFF; 
    width:80px; 
    height:80px; 
    position:absolute; 
    top:10px; 
    left:10px; 
} 

.parent { 
    width : 100px; 
    height : 100px; 
    position : relative; 
    border : 1px solid #000; 
    overflow : hidden; 
    margin : 10px; 
} 

.child { 
    -webkit-filter : blur(5px); 
    width   : 200px; 
    height   : 200px; 
    position  : absolute; 
    top   : -60px; 
    left   : -60px; 
} 

.checkerboard { 
    background : url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Checkerboard_pattern.svg/220px-Checkerboard_pattern.svg.png'); 
}

來源

2014-01-20 15:53:30 Ruskin

裁剪一個CSS所迷離背景

回答

相關問題