【发布时间】：2017-04-05 22:05:32
【问题描述】：
我们需要在滑块文本上显示白色文本颜色。为此，我们在滑块图像上应用黑色背景颜色和 0.65 不透明度 CSS，以显示滑块白色文本可读。对于不透明度，我们应用以下 CSS：
.zlslides .ms-slide-link {
background-color: rgb(0, 0, 0);
opacity: 0.65;
}
以下是滑块文本 HTML：
<h2 class="master_event_title">Brasil Loves Baile Funk ft Naldo • Dance Party</h2>
以下是文本的 CSS：
.master_event_title {
color: rgb(255, 255, 255);
font-size: 30px;
font-weight: 700;
position: relative;
text-align: center;
top: 41%;
z-index: 999;
}
应用上述 CSS 后 z-index: 999;滑块文本以白色显示。
但问题是滑块文本颜色在 Fire Fox 浏览器中仅显示白色。在 Google Chrome 和 Safari 浏览器滑块文本颜色不显示为白色。 没有 z-index：999；文本不以白色显示。对于 Google Chrome 和 Safari 浏览器滑块文本颜色，我们应用以下 CSS：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.master_event_title{z-index: 999;}
}
但上面的 CSS 也不起作用。如果有人知道这个问题的解决方案，请重播我。在这里，我附上了 Google chrome 浏览器问题的屏幕截图。所以请检查一下。
谢谢， 凯坦。
【问题讨论】：
-
那么基本要求是你需要在图像顶部显示一些文字吗？或者您想在幻灯片的不同图像上显示不同的文本？
-
请在jsfiddle.net 或其他类似网站上提供您的问题的简化示例
-
@Veer 我认为要求是在图像顶部显示文本，为了使文本可读，他想在图像上添加深色不透明度。
-
请同时添加您的 HTML，仅 CSS 并不能帮助我们识别问题。
-
然后他可以在 html 中添加图像，并在 div 中添加背景颜色：黑色，然后为 div 赋予不透明度。小提琴会很棒。
标签： css wordpress google-chrome z-index opacity