1: Introduction
When designing a web page, we usually need to make the text color and background color complement each other to improve readability and visual effects. In this article, we will introduce how to use CSS to make the text color adapt to the background color.
Two: Code
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.text-box {
width: 1500px;
height: 500px;
background: linear-gradient(to right, black 50%,white 50%);
mix-blend-mode: hue;
border: solid 1.5px black;
margin: 200px auto;
line-height: 500px;
font-size: 600;
}
.text {
color: #FFF;
font-size: 50px;
font-weight: 600;
mix-blend-mode: difference;
transition: all .2s linear;
}
.text-box:hover >.text {
transform: translateX(500px);
cursor: pointer;
}
HTML
<body>
<div class="text-box">
<div class="text">Java-HTML5-CSS3-JS</div>
</div>
</body>
Three: Summary
A detailed explanation of the mix-blend-mode attribute will be presented to you in the next article. Please stay tuned for our more detailed elaboration, hoping to provide you with more valuable information.