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

（见here）

Answer 2

如果您可以使用图片存储值，则可以使用data-* - 属性：

// 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

为文字添加灰色文字阴影。它会完美地运作。