html - CSS 使图像上的文本更具可读性

Question

我现在正在处理一些事情，但这行不通!

基本上我想做的是在我的图像上放一个黑色不透明的“屏幕”，这样它就不那么亮了，你可以阅读图像顶部的文字。

这里的例子:

这是我目前拥有的。

<div class="overlay">
    <span class="front-coffee block"></span>
    <p class="center">Coffee Shop</p>
</div>

div.overlay{background: black; z-index: 5; width:100%; height:100%;}
.block { display: block; }
div.popularCategory p{font-size: 24pt; color: white; margin-top:-50px}
span.front-coffee{background:url('../img/categories/coffee.jpg') no-repeat center; zoom:0.65; width:100%; height:100%; z-index: 4}

Answer 1

如果我没听错，那么您可以尝试稍微模糊一下照片，使文本不会显示给用户，但是这种方法和您的方法也可能会通过 Firebug 或任何其他类似的东西进行更改，并使用户可见的文本，因此这有点不安全。我认为解决此问题的最佳方法是手动编辑照片并添加叠加层，这样就没人能看到原始图像了。

下面是模糊照片的方法(Cross Browser Image Blur with CSS):

img {
    width:367;
    height:459px;
    -webkit-filter: blur(3px); //change the value according to what suits the best
    -moz-filter: blur(3px); //change the value according to what suits the best
    -o-filter: blur(3px); //change the value according to what suits the best
    -ms-filter: blur(3px); //change the value according to what suits the best
    filter: blur(3px); //change the value according to what suits the best
}