是否可以使用 CSS 或 JS(如果 CSS 无法实现)根据背景颜色动态更改文本颜色?我在文字下方有一张图片。我的文字颜色是白色,但图像上有一个白色的形状。当文本超出白色形状时,我需要将文本颜色更改为较深的颜色。
HTML:
<div class="biography">
<img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" class="bio-img">
<div class="biography-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>
Vestibulum pellentesque auctor quam a sollicitudin.<br>
Pellentesque accumsan a sem eget dictum.
</p>
<p>
Morbi dictum lorem tortor, id consequat libero gravida ut.<br>
Nullam dictum sed massa et bibendum.
</p>
<p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
<p> Suspendisse potenti.</p>
</div>
</div>
CSS:
body {
background-color: #7ccbe6;
}
.biography {
min-height: 410px;
}
.biography .biography-text {
position: relative;
margin-top: -420px;
padding: 82px 130px 0 380px;
z-index: 1;
}
.biography-text {
color: #fff;
}
这是一个 Codepen看到更好的画面。
最佳答案
我知道您正在寻找 JS 解决方案。但是,如果有人想要 css 解决方案,这里是一个解决方案 http://codepen.io/hellouniverse/pen/JNwvyL
$bg-color: black; // This can change
$white : #fff;
$black : #000;
@function set-text-color($color) {
@if (lightness( $color ) > 50) {
@return $black; // Lighter color, return black
}
@else {
@return $white; // Darker color, return white
}
}
.text--color {
background: $bg-color;
color: set-text-color($bg-color);
}
// this is here just for demon purpose
.text {
padding: 10px;
text-align: center;
}
<p class="text text--color">I change in color</p>
关于javascript - 根据背景颜色更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35523211/