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

如果我找到了你，那么你可以尝试将照片模糊一点，文字没有显示给用户，但是这种方法和你的方法也可以通过萤火虫或任何其他类似的东西来改变并制作文本对用户可见，因此这有点不安全。我认为解决这个问题的最佳方法是编辑照片并添加叠加层，以便没有人能够看到原始图像。

所以这里是如何模糊照片（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
}

Answer 2

<div class="front-coffee block">
     <img src='//image goes here' border='0' />
</div>

// CSS

.front-coffee {
      //Your CSS here
      background: rgba(0, 0, 0, 0.8); //If put against a lighter background, this will give a nice transition effect towards a lighter gray colour. This is absolutely not needed. But I suggest having at least 1 solid layer behind your opaque image.
      }
.front-coffee img {
      opacity: 0.7; // This will ensure that all images will have an opacity set to 70% .
      }

希望这有帮助。