কিভাবে তৈরি করা যায়: হলুদ টেক্সট

হলুদ টেক্সট কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন:

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

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

mix-blend-mode প্রক্রিয়াটি ব্যবহার করে ছবিতে হলুদ টেক্সট যোগ করা যায়। কিন্তু IE বা Edge এর সাথে এটি সমর্থিত না:

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

亲自试一试