Question

我的HTML模板有问题。我必须模糊这个“li”的背景而不是enteire内容（如果我将模糊选项放在样式部分中，则h1变得模糊）。你有什么想法吗？

<li style="background-image: url('test.png'); background-repeat:no-repeat;">
<h1>Title</h1></li>

感谢。

Answer 1

我没有得到你所说的 - ＆gt;＆gt;＆gt;我必须模糊这个＆＃34; li＆＃34;的背景。而不是enteire内容＆lt;＆lt;＆lt;＆lt;＆lt;

但是你可以做一件事......在adobe photoshop中打开你的图像（即你的test.png图像）并降低其不透明度并重复使用它。

我在jsfiddle中尝试过的是

<li style="background-image: url('test.png'); background-repeat:no-repeat;">
<font style="font-size:26px; color:#8c001a;">Title</font></li>

查看左侧的jsfiddle http://jsfiddle.net/m4wkq/1/

Answer 2

这是问题的意思，第二个例子模糊了image和css： http://jsfiddle.net/ignaciocorreia/Wn9F9/

解决方案是将它们分开放置，你不能blub BG图像：

<li><div>image here</div><span>text here</span></li>

解决方案：http://jsfiddle.net/ignaciocorreia/YLsQP/1/

Answer 3

请检查下面的html实现和使用过的css代码。这可以通过CSS3来实现。

HTML实施：

<ul> <li class="test"> <p>Dummy text!!!!!!</p> </li> </ul>

使用的CSS：

.test:before { background-image: url("20astro12.jpg"); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); position: fixed; display: block; content: ""; width: 100%; height: 50px; z-index: -1; }

.test { position: fixed; z-index: 0; }

p { color: #fff; }

希望，这可以在一定程度上帮助你！这个CSS3属性在Mozilla中不支持！所以至少要考虑该浏览器的这个功能。请快速尝试:)如果它对你有所帮助，那么请投票：）

干杯：）

模糊<li>的背景，但不是内容</li>

3 个答案: