ပလိုက်ချိန် စကားသံ ကို ဖန်တီးရန်:

ပလိုက်ချိန် စကားသံ ကို ဖန်တီးရန် ဘာကြောင်း

ပထမ အစက် - HTML ကို ထည့်ပါ:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

ဒုတိယ အစက် - CSS ကို ထည့်ပါ:

mix-blend-mode အခြေအား ကို အသုံးပြုပြီး ပလိုက်ချိန် စကားသံ ကို အရိုးမှ ပုံ ထဲသို့ ထည့်ပါ နိုင်ပါသည်။ သို့သော် အိပ် သို့မဟုတ် အိန်ဂျယ် က ထောက်ပံ့ချေ:

.image-container {
  background-image: url("img_nature.jpg"); /* အသုံးပြုသော ပုံ - အရေးပါသည်！ */
  background-size: cover;
  position: relative; /* စကားသံ ကို အရှိန်းတွင် စီစဥ်ပြီး */
  height: 300px; /* အခြေအားနှင့် အရောင်း */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* အညွှန်းအရောင်း အရောင်း */
  font-weight: bold;
  margin: 0 auto; /* အရှိန်းတွင် စီစဥ်သော စကားသံ အကွက် */
  padding: 10px;
  width: 50%;
  text-align: center; /* အရှိန်းတွင် စကားသံ */
  position: absolute; /* စကားသံ ကို စီစဥ်ပြီး */
  top: 50%; /* စကားသံ ကို အရှိန်းတွင် စီစဥ်ပြီး */
  left: 50%; /* စကားသံ ကို အရှိန်းတွင် စီစဥ်ပြီး */
  transform: translate(-50%, -50%); /* စကားသံ ကို အရှိန်းတွင် စီစဥ်ပြီး */
  mix-blend-mode: screen; /* ဒါက စကားသံ ကို ပြုပြီး ပေါင်းစပ်ရန် အတွက် */
}

亲自试一试

အရိုးမှ အရောင် ရှိသော စကားသံ ကို ရှိပါက သင့် mix-blend-mode ပြောင်းလဲပြီး multiplyနှင့် နောက်ခံ အရောင် ကို ရူပ်ရှား ပြီး အရောင် ကို ရူပ်ရှား ပြီး ဝေးရှိသေးသည်:

အကြောင်း

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

亲自试一试