jquery - CSS颜色可见性问题

Question

这似乎是一个非常奇怪的问题，但我有以下问题：

如您所见，当图像颜色较深时，分页显示不清晰。

我想根据下面的图像颜色更改分页颜色。

这可能与 rgb/css 吗？交替使用Javascript？

Answer 1

例如，您可以使用 50% 的 rgba：

element {
color: rgba(255,255,255,0.5);
}

这将使字体变白并将不透明度设置为 50%。您可以通过以下方式获得相同的效果：

element {
opacity: 0.5;
color: rgb(255,255,255);
}

请注意，并非所有浏览器都支持第一种方法。

为了防止分页隐藏在白色背景上，您可以使用文本阴影：

element {
text-shadow: 0px 1px 3px #000;
}

（见这里）

Answer 2

如果您可以使用图像存储值，则可以使用data-*-attribute：

// images that are dark gets the new attribute
<img src="" alt="">
<img src="" alt="" data-invert="true">

// let's say this is you pagination
<nav id="pagination">
    // your pagination elements
</nav>

比你可以更新你的幻灯片功能（这只是伪代码）：

function slide() {
    // lets say you know the current image and there's an array of images
    var current = 1;
    if ('true' == images.eq(current).attr('data-invert') {
        $('pagination').addClass('invert');
    } else {
        $('pagination').removeClass('invert');
    }
}

而且该课程invert具有更亮的配色方案，在较暗的图像上看起来不错。

Answer 3

我建议您采用不同的设计方法，而不是使用 JS。尝试添加border适用于所有背景的浅灰色阴影。看这个演示：

http://jsfiddle.net/fqZf4/3/

Answer 4

为您的文本添加灰色文本阴影。它将完美地工作。