使文本在任意背景图像上可读

Posted 2023-03-06

【中文标题】使文本在任意背景图像上可读

【英文标题】：Make text readable on arbitrary background image

【发布时间】：2013-08-21 08:24:48

【问题描述】：

我正在使用来自新 Bootstrap 3 RC2 的 carousel component。但是，我注意到实际上标题通常不可读，因为我的图片颜色非常多。之前的 Bootstrap 2.3 使用了 black gradient for captions，但它似乎已被删除。

有什么方法可以使用 CSS 设置标题样式，以使它们在任意图像上都可读？我尝试过使用阴影和背景颜色，但这变得非常丑陋。

这里有一些示例代码：http://bit.ly/1eX8Tz9

【参考方案1】：

为了得到显示在灰色半透明背景上的内容

只需将以下代码添加到您的 css 中

.carousel-caption
    background: rgba(0,0,0,0.5);

查看演示Here