စာသားဖြတ်နည်း
CSS ဖြင့် တုံ့ပြန်မှုဖြတ်တောက်ခြင်း/ခေါက်ထွက်စာသားကို ဖန်တီးနည်းကို လေ့လာပါ။
ဖြတ်တောက်ထားသော စာသား (သို့မဟုတ် နောက်ကောက်စာသား) သည် နောက်ခံပုံတစ်ခု၏ အပေါ်ဘက်တွင် ဖြတ်တောက်ထားသော စာသားကို မြင်ရသည်-
သဘာဝ
မှတ်ချက်- ဤဥပမာသည် Internet Explorer သို့မဟုတ် Edge တွင် အလုပ်မလုပ်ပါ။
Cutout Text ဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="image-container">
<div class="text">NATURE</div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ပိုင်ဆိုင်မှုသည် ပုံ mix-blend-modeတွင် cutout စာသားကို ထည့်နိုင်စေသည်။ သို့ရာတွင်၊ ၎င်းကို IE သို့မဟုတ် Edge တွင် မပံ့ပိုးနိုင်ပါ။
ဥပမာ
.image-container {
background-image: url("img_nature.jpg");
/* The image used - important! */
background-size: cover;
position: relative; /* Needed to position
the cutout text in the middle of the image */
height: 300px; /* Some
height */
}
.text {
background-color: white;
color: black;
font-size: 10vw;
/* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position
text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen;
/* This makes the cutout text possible */
}
အနက်ရောင်ကွန်တိန်နာစာသားကို လိုချင်ပါက၊ ရောနှောပေါင်းစပ်မှုမုဒ်ကို "အမြောက်အများ" နှင့် နောက်ခံအရောင်မှ အနက်ရောင်သို့ ပြောင်းကာ အရောင်မှ အဖြူရောင်သို့ ပြောင်းပါ-
ဥပမာ
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}