CSS - 具有Blurr背景的文本

我一直在嘗試很長一段時間才能達到使文本塊的背景變得模糊的效果，以便能夠在圖片頂部的文本上具有更多可讀性。CSS - 具有Blurr背景的文本

但我不斷收到模糊的背景和文字。現在這必須是內聯的CSS，因爲我必須把它放在每個條目中。

這就是我想要

<div style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;"> 
    <p style= "z-index: 1;"> 
     Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina! 
    </p> 
</div>

這是link to see what's happening。

來源

2013-12-10 restre

請出示一些代碼。這可能與你在CSS中使用哪個選擇器有關。 – Sablefoste

@SableFoste他在那裏有代碼，它只是格式不正確。我有一個待批准的編輯... –

只是一個側面說明，儘量避免這樣的內聯樣式，尤其是在SO上發佈時。這使我們更難以閱讀。 –

我同意@Dryden Long，你應該儘量避免這樣的長款。然而，你也有風格<div>，而我會建議你風格<p>。像：

<div> 
    <h1>This is not blurry</h1> 
    <p style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1;"> 
     Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina! 
    </p> 
</div>

這裏是一個小提琴：http://jsfiddle.net/sablefoste/JaazU/1/

來源

2013-12-10 17:35:49 Sablefoste

但是我嘗試過了，但是我一直讓文本變得模糊......想法是文本不會變得模糊，只有背景，文本在哪裏，所以人們可以更好地閱讀它。 – restre

過濾器工作在整個DIV，而不僅僅是背景。

嘗試添加該

<p style = "filter:-; -o-filter:-; -ms-filter:-; -moz-filter:-; -webkit-filter:-;">

它的工作對這個JSFiddle

來源

2013-12-10 17:52:27 JustHannah

我只是試過這個，沒有成功... :( – restre

修改黑貂foste的代碼來讓這個例子的jsfiddle，但所有你需要做的是有兩個div，1模糊背景， 1是正常的，並將正常的一個放在模糊處。

http://jsfiddle.net/pW83w/

.blur {background:#e5ffcc; background:rgba(229,255,204,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1; height: 5em; width: 20em; position: absolute;} 

.noBlur { 
    font-weight: bold; 
    z-index: 5; 
}

來源

2013-12-10 18:22:14 user3037493

是的，但是我怎麼把文本放在模糊的div上？ – restre

給.noBlur一個負的頂部邊緣在em ....像margin-top： 5em;（數字將會很高.blur是） – user3037493

CSS - 具有Blurr背景的文本

回答

相關問題