Question

我要求在卡片中显示多个图像，我想在它们上面写一些文字。这些是用户上传的随机图像，因此可以是任何颜色。需要在它们上面的白色文字不透明，如附带的小提琴所示。

这是一个小例子 - http://jsfiddle.net/7dgpbLd8/1/

这是我在图像上添加一些灰色div的解决方案。但是，文本在灰色背景上应始终为白色。但它也在这里被遮蔽了。很高兴知道如何遮蔽实际背景，以便文本可读。

Answer 1

要么遵循Lee的建议（虽然我建议添加一些填充）或使用text-shadow，like so。

div {
    color: white;
    text-shadow: 0 1px black;
}

或者你可以merge our two approaches。

span {
    color: white;
    text-shadow: 0 1px black;
    background: #333; /* For browsers that don't support RGBA */
    background: rgba(0,0,0,0.18);
    padding: 4px 8px;
}

您的帖子的问题是您设置了opacity。但是，当您降低不透明度时，不仅会更改背景，还会更改其所有内容。换句话说，文字在你的小提琴中也有较低的不透明度。在我上面提到的小提琴中，你没有这个问题因为你使用了rgba。 RGBA使用默认的RGB颜色表示，但添加了一个alpha层组件（即：不透明度）。这意味着您可以添加（半）透明的颜色。

它的工作方式与不透明度相同，只需添加颜色所需的值（假设为0.8），然后在默认的rgb值之后添加。例如：RGB为白色255,255,255，黑色为0,0,0。如果您希望那些不透明度为0.8，请在后面添加0.8：rgba(255,255,255,0.8)或rgba(0,0,0,0.8)。通过这样做，只有背景的不透明度会改变，而不是文本的不透明度。有关示例，请参阅the link above。

Answer 2

我会将图像放在具有深色背景的div中，然后降低图像本身的不透明度，使图像变暗以便您可以阅读文本。这样，您还可以在悬停时使图像变暗，以提高可读性。

http://jsfiddle.net/3w34k1ea/

    .img-wrapper{
    width: 100%;
    height: 100%;
    background: #000;    
}
     img {
      width: 100%
        height: 100%;
        opacity: .5;
}
     img:hover{
    opacity: .3;
}
     p {
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
}

Answer 3

同时最简单的方法和最好的结果就是使用半透明覆盖，例如：https://jsfiddle.net/zmpwunr7

<div class="box">

    <div class="overlay top">
        text
    </div>

    <img ... />

</div>

.box {
    position: relative;
}

.box .overlay {
    background-color: rgba(0, 0, 0, 0.50);
    color: rgb(255, 255, 255);
    position: absolute;
}
    .box .overlay.top {
        top: 0px;
    }

Answer 4

将文本放在<span>标记内并给它一个类，然后在CSS文件中：

span.your-class {
    background:rgba(255,255,255,0.5);
    padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}

这会将文本放在图像顶部的半透明框中。尝试使用文字颜色和背景颜色，直到你开心。

以下是一个例子：http://jsfiddle.net/9svp8qoh/

Answer 5

我有过这种情况一次。我妥协创建了不透明度为0.5的跨度并给出了深色背景，然后放置了文本。如果我理解你的问题，这可能是你的解决方案。

您只能向背景添加不透明度：

RGBA（255,0,0,0.5）

Check this post

Answer 6

我会在你的位置使用文字阴影，而不是一个我会尝试多重阴影，直到达到最佳解决方案。例如：

text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px  rgba(0,0,0,1);

<强> FIDDLE

Answer 7

这里有一些答案可以帮助您提高文字的可读性。但它们不会使背景图像变暗，这就是你要求的。你可以通过使用css过滤器实现这一点，例如：亮度滤镜：

img {
    filter: brightness(20%);
}

值0表示完全黑色图像，值越高表示结果越亮。示例：http://codepen.io/anon/pen/OPqRJK

注意：目前只有Firefox支持无前缀版本，IE没有过滤支持。见http://caniuse.com/#feat=css-filters 如果您需要支持这些浏览器，请查看BenSlight的答案。它的解决方案基本相同。

进一步阅读：css-tricks.com上有一篇很好的文章解释了我们使用css过滤器的所有可能性：https://css-tricks.com/almanac/properties/f/filter/

Answer 8

你可以使用css的background属性，你可以在其中给出颜色和图像路径例如： -

背景：#FFFFFF网址（“图片路径”）;

这将为图像添加背景颜色。

使CSS中白色文本下方的背景变暗

8 个答案: