4

我现在正在做一些事情，但这是行不通的！

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

此处展示的示例：

在此处输入图像描述

这就是我目前所拥有的。

<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}
4

2 回答 2

6

如果我的理解正确，那么您可以尝试稍微模糊一下照片，以使文本不会向用户显示，但是这种方法和您的方法也可以通过 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
}
于 2013-10-12T15:47:11.863 回答
0 
<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% .
      }

希望这可以帮助。

于 2013-10-12T15:39:06.517 回答