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
}

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% .
      }

希望这会有所帮助。