近くのDIV要素にぼやけを引き起こすフィルターのぼけを避ける

Question

2つのdivを互いに近づけて、2番目のフィルターにblur（5px）という新しいフィルターを追加しました。私が望んでいたことだけでコンテンツを作ることですぼやけて表示されますが、すべてをぼかすので、「blurinessは、」あなたは、この例では見ることができる最初のdiv影響：

https://jsfiddle.net/90vozg7g/

CSSの例：

.one{ 
    background-color: #FFF; 
    color: #000; 
    height: 40px; 
    border-bottom: 1px solid #000; 
} 

.two{ 
    background-color: red; 
    color: #FFF; 
    height: 40px; 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
} 

を黒いボーダーの上に、まだ赤いぼんやりとした効果があります。

私は最初のdivがこれに影響されず、常にぼかし効果の '上にある'ようにします。私は絶対的かつ固定的な位置付け、Z-インデックス操作などを試みましたが、何も動作していないようです（クロム勝ちでテストされました）。

はい、パディング/マージンを追加してこれを避けることができますが、私の場合は不可能です。

最初のdivがぼかしの影響を受けないように誰もが知っていますか？ Zインデックスと一緒に両方のdiv要素の相対位置を使用して

Answer 1

は、あなたが探しているものをあなたを取得する必要があります... https://jsfiddle.net/90vozg7g/1/

.one{ 
    background-color: #FFF; 
    color: #000; 
    height: 40px; 
    border-bottom: 1px solid #000; 
    position: relative; 
    z-index: 2; 
} 

.two{ 
    background-color: red; 
    color: #FFF; 
    height: 40px; 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
    position: relative; 
    z-index: 1; 
} 

そして、あなたが重複したテキストをしたくない場合は、ちょうどに平手打ち：

overflow: hidden;