স্বচ্ছ পাঠ্য ব্যাকগ্রাউন্ডের বাইরে কাটা হয়েছে


92

সিএসএস সহ নিম্নলিখিত চিত্রের মতো ব্যাকগ্রাউন্ড এফেক্ট থেকে স্বচ্ছ পাঠ্য কেটে ফেলার কোনও উপায় আছে কি ?
চিত্রগুলি টেক্সট প্রতিস্থাপনের কারণে সমস্ত মূল্যবান এসইও হারানো দুঃখজনক হবে।

স্বচ্ছ পাঠ্য ব্যাকগ্রাউন্ডের বাইরে কাটা হয়েছে

আমি প্রথমে ছায়ার কথা ভেবেছিলাম কিন্তু আমি কিছুই বুঝতে পারি না ...

চিত্রটি সাইটের ব্যাকগ্রাউন্ড, একটি পরম অবস্থানযুক্ত <img>ট্যাগ


"চিত্রগুলি টেক্সট প্রতিস্থাপনের কারণে সমস্ত মূল্যবান এসইও হারাবেন।" বিদ্যমান চিত্র প্রতিস্থাপন কৌশলগুলিও রয়েছে, যা এখনও এসও বান্ধব। বিটিডাব্লু: প্রকৃতপক্ষে অক্ষরের পিছনের পটভূমিতেও স্বচ্ছ থাকতে হবে, যা এখানে সমস্যা ...
ফিওলা

হ্যাঁ, CSS এর মাধ্যমে সম্ভব হলে এটি একটি দুর্দান্ত অনুশীলন হবে ...
জেসিকা লিঙ্গমন

এর <h1><img alt="Some Text" /></h1>চেয়ে কম এসইও বন্ধুত্বপূর্ণ হওয়ার কারণ আমি দেখছি না <h1>Some Text</h1>। Ditionতিহ্যগতভাবে, চিত্রগুলির সাথে সমস্যাটি হ'ল এগুলি কেবল কোনও সমর্থনকারী মার্কআপ ছাড়াই পৃষ্ঠায় ফেলে দেওয়া হয়েছে।
cimmanon

হ্যাঁ, আপনি ঠিক বলেছেন। আমি সম্ভবত এসইও পয়েন্টগুলি না হারিয়ে ছবিগুলি ব্যবহার করতে পারি তবে আপনি এখনও পাঠ্য নির্বাচন করতে পারবেন না, পৃষ্ঠায় সন্ধান করতে পারবেন, লিঙ্কিং আরও জটিল হবে, এবং পাঠ্য আপডেট করার জন্য এটি আরও অনেক বেশি কাজ হবে ...: /
প্রেমের ডেজার

4
ঠিক তেমনই আপনি জানেন, গুগল সিএসএস চিত্র প্রতিস্থাপনের কৌশলগুলিতে সম্পূর্ণ শীতল: mezzoblue.com/archives/2008/05/05/image_replac
cimmanon

উত্তর:


47

এটি CSS3 দিয়ে সম্ভব তবে এটি সমস্ত ব্রাউজারে সমর্থিত নয়

ব্যাকগ্রাউন্ড-ক্লিপ সহ: পাঠ্য; আপনি পাঠ্যের জন্য একটি পটভূমি ব্যবহার করতে পারেন, তবে আপনাকে এটি পৃষ্ঠার পটভূমিতে সারিবদ্ধ করতে হবে

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/


স্বয়ংক্রিয় প্রান্তিককরণ

সামান্য জাভাস্ক্রিপ্টের সাহায্যে আপনি পটভূমিটি স্বয়ংক্রিয়ভাবে সারিবদ্ধ করতে পারেন:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});
body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>
اور

http://jsfiddle.net/JGPuZ/1336/


আপনার লোকেরা খুব দ্রুত: ডি
গিজস

ওহ মহান! আমি বাড়ির সাথে সাথে অটো সারিবদ্ধতাটি পরীক্ষা করব! ধন্যবাদ! : ডি
লাভ ডেইজার

আপনাকে কিছুটা কোড পরিবর্তন করতে হবে, পরিস্থিতির উপর নির্ভর করে, এখন এটি অন্যান্য উপাদানগুলির সাথে বিরোধে লিপ্ত হতে পারে এবং এইটি সত্যিই দ্রুত লেখা হয়েছিল, যদি আপনার কোনও প্রশ্ন থাকে তবে আমি তাদের শুনব
গিজস

4
উত্তরটিকে অবহেলা না করা, যা একটি দুর্দান্ত সমাধান, তবে background-clip:textএটি একটি ওয়েবকিট-কেবল, অ-মানক বিকল্প। CSS3 textএই বৈশিষ্ট্যটির জন্য মানটিকে অনুমতি দেয় না ( দেখুন )।
tanius

4
এই কৌশলটি আপনাকে এমন উপাদানটির পটভূমি দেখতে দেয় যেখানে পাঠ্যটি সাধারণত থাকবে। আমি যেখানে পাঠ্যটি সাধারণত থাকত সেই জায়গার মধ্য দিয়ে পাঠ্যের সাথে উপাদানটির অন্তর্গত কী আছে তা দেখার উপায় খুঁজছি।
ভিনস

49

সিএসএসের মাধ্যমে এটি সম্ভব হলেও এসভিজি মাস্কিংয়ের সাথে একটি ইনলাইন এসভিজি ব্যবহার করা আরও ভাল উপায় । সিএসএসের চেয়ে এই পদ্ধতির কিছু সুবিধা রয়েছে:

কোডপেন ডেমো: এসভিজি পাঠ্য মুখোশ

স্বচ্ছ পাঠ্য ক্লিপিং ব্যাকগ্রাউন্ড

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

আপনি যদি পাঠ্যটি নির্বাচনযোগ্য এবং অনুসন্ধানযোগ্য করে তোলার লক্ষ্য রাখেন তবে আপনাকে এটি <defs>ট্যাগের বাইরে অন্তর্ভুক্ত করতে হবে । নিম্নলিখিত উদাহরণটি <use>ট্যাগ সহ স্বচ্ছ পাঠ্য রাখার একটি উপায় দেখায় :

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>


4
এটি একমাত্র সমাধান বলে মনে হচ্ছে যা আজ ক্রস ব্রাউজারে কাজ করে: আইই ১১, এফএফ, ক্রোম, সাফারি। ওয়েব জুড়ে সমস্যাটি সরবরাহ করা অন্যান্য অনেকগুলি সমাধানের মতো ব্যাকগ্রাউন্ড হিসাবে চিত্রের প্রয়োজন নেই।
টিমো কাহকেনেন

4
এই উত্তর থেকে অনুপ্রাণিত হয়ে আমি একটি কীফ্রেমস অ্যানিমেশন তৈরি করেছি, যেখানে সাদা বৃত্তাকার আয়তক্ষেত্রের স্বচ্ছ এসভিজি-পাঠ্যটি ঘোরান। পটভূমিতে পাঠ্য এবং চিত্র রয়েছে। যান এবং দেখুন: jsbin.com/nipuqu/3 (বিশ্ব চ্যাম্পিয়নশিপ আসছে :))
টিমো কোহকেনেন

4
দুর্দান্ত সমাধান, তবে যেহেতু "পাঠ্য নির্বাচন করুন এবং পৃষ্ঠায় সন্ধান করুন" ওপির প্রয়োজনীয়তার মধ্যে রয়েছে বলে মনে হচ্ছে, আপনি অংশটির <text>বাইরের <defs>অংশটি অন্তর্ভুক্ত করতে চাইতে পারেন । (বিটিডব্লিউ আমি নিশ্চিত নই যে এসই ক্রোলাররা কীভাবে ডিভিএসে এসভিজি সামগ্রী নিয়ে কাজ করে)। ভয়ঙ্কর এফএফ বাগের শোষণ সহ ওপি কী চায় তা এখানে রাখার একটি উপায় এখানে রইল
Kaiido

লেখাটি গতিশীল হলে কী হবে? এটি প্রস্থটি স্বয়ংক্রিয়ভাবে সামঞ্জস্য করে না।
ইমরান বুঘিও

4
@ ইমরান বুগিও এটি করেন না। এসভিজি পাঠ্য সরল এইচটিএমএল পাঠ্যের মতো কাজ করে না। আপনি এটি অবস্থান নি। তথ্যের জন্য আরও এখানে দেখুন
ওয়েব-টিকি

16

একমাত্র উপায় যা বেশিরভাগ আধুনিক ব্রাউজারগুলিতে কাজ করে (অর্থাত্ প্রান্ত ব্যতীত), যদিও এটি কেবল একটি কালো ব্যাকগ্রাউন্ড সহ, ব্যবহার করা

background: black;
color: white;
mix-blend-mode: multiply;

আপনার পাঠ্য উপাদানটিতে এবং তারপরে আপনি যা যা ব্যাকগ্রাউন্ড চান তা রেখে দিন। মূলত 0-255 রঙের কোডটি 0-1 তে মানচিত্র করুন এবং তারপরে যা কিছু আছে তার দ্বারা গুণিত করুন, তাই কালো কালো এবং সাদাকে 1 দ্বারা গুণিত করে কার্যকরভাবে স্বচ্ছ হয়ে যায়। http://codepen.io/nic_klaassen/ful/adKqWX/


4
কালো রঙের ব্যবহার সঙ্গে সাদা ব্যাকগ্রাউন্ড জন্য color-dodge, lightenবা screenউপরmix-blend-mode
ইমরান Bughio

3

এটা তোলে হয় সম্ভব, কিন্তু এ পর্যন্ত শুধুমাত্র ওয়েবকিট ভিত্তিক ব্রাউজার সঙ্গে (ক্রোম, সাফারি, Rockmelt, কিছু ক্রোমিয়াম প্রকল্পের উপর ভিত্তি করে।)

কৌশলটি হ'ল সাদা রঙের মধ্যে একটি উপাদান রয়েছে যা দেহের মতো একই পটভূমি রয়েছে, তারপরে -webkit- background-clip: text;অভ্যন্তরীণ উপাদানটি ব্যবহার করুন যার মূল অর্থ "পাঠ্যের বাইরে পটভূমি প্রসারিত করবেন না" এবং স্বচ্ছ পাঠ্য ব্যবহার করুন।

section
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    width: 100%;
    height: 300px;
}

div
{
    background: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 0);

    width: 60%;
    heighT: 80%;
    margin: 0 auto;
    font-size: 60px;
    text-align: center;
}

p
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    -webkit-background-clip: text;
}
​

http://jsfiddle.net/BWRsA/


কুল কৌশল! কিন্তু এখন সারিবদ্ধ সবকিছু সঠিকভাবে একটি দুশ্চরিত্রা হতে হবে .. -.-
ভালবাসা দিন

হ্যাঁ, এটি অন্য সমস্যা another এটি এখনও বিকাশে রয়েছে এবং আমি আন্তরিকভাবে আশা করি আমরা শীঘ্রই এরকম কিছু দেখব! :)
কাইল

এছাড়াও, আপনি চিত্রটিতে স্বচ্ছ পাঠ্যকে সর্বদা স্তর করতে পারেন, যাতে এটি এখনও নির্বাচনযোগ্য। তবে আমি নিশ্চিত যে এটি SEO এর পক্ষে খারাপ অভ্যাস .. লুকানো বার্তা / কীওয়ার্ড এবং এ জাতীয়।
কাইল

আমি নিশ্চিত যে এটি ওয়েবকিট ব্রাউজারগুলিতে খুব সুন্দর দেখাচ্ছে তবে অন্য সবার জন্য এটি কিছু ঘাসের উপরে একটি আধা স্বচ্ছ সাদা বাক্স।
cimmanon

4
আহা, আসুন ছেলেরা ... হ্যাঁ আমি এটির উত্পাদনতে ব্যবহার করার পরিকল্পনা করছি। তবে অবশ্যই ফ্যালব্যাক ছাড়া না! @ সিমমনন
22:

2

আমার ধারণা আপনি ব্যবহার করেbackground-clip এমন কিছু অর্জন করতে পারেন তবে আমি এখনও এটি পরীক্ষা করে দেখিনি।

এই উদাহরণটি দেখুন:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(কেবল ওয়েবকিট, আমি কীভাবে সাদা পটভূমিতে কালো পটভূমি পরিবর্তন করতে পারি তা এখনও জানি না)


হ্যাঁ, এটি কাজ করতে পারে! ধন্যবাদ, এখন সবকিছু সঠিকভাবে সারিবদ্ধ করার জন্য ..
জঘন্য

2

চারপাশে গোলযোগের সময় আমি এটি করার একটি নতুন উপায় আবিষ্কার করেছি, এটি কীভাবে কাজ করে তা আমি পুরোপুরি নিশ্চিত নই (যদি অন্য কেউ ব্যাখ্যা করতে চায় তবে দয়া করে করুন)।

এটি খুব ভালভাবে কাজ করছে বলে মনে হচ্ছে এবং এর জন্য কোনও ডাবল ব্যাকগ্রাউন্ড বা জাভাস্ক্রিপ্টের প্রয়োজন নেই।

কোডটি এখানে: JSFIDDLE

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}
<div></div>


1

আপনি একটি উল্টানো / নেতিবাচক / বিপরীত ফন্ট ব্যবহার করতে পারেন এবং font-face="…"সিএসএস নিয়মের সাথে এটি প্রয়োগ করতে পারেন । বর্ণগুলির মধ্যে ছোট সাদা ফাঁকগুলি এড়াতে আপনাকে অক্ষরের ব্যবধানের সাথে খেলতে হবে।

আপনার যদি কোনও নির্দিষ্ট ফন্টের প্রয়োজন না হয় তবে এটি সহজ। পছন্দসই একটি ডাউনলোড করুন, উদাহরণস্বরূপ উল্টো ফন্টের সংগ্রহ থেকে ।

আপনার যদি কোনও নির্দিষ্ট ফন্টের প্রয়োজন হয় (বলুন "স্যানগুলি খুলুন"), এটি কঠিন। আপনাকে আপনার বিদ্যমান ফন্টকে একটি উল্টানো সংস্করণে রূপান্তর করতে হবে। এটি হরফ ফন্ট ক্রিয়েটর, ফন্টফর্জ ইত্যাদি দিয়ে সম্ভব, তবে অবশ্যই আমরা একটি স্বয়ংক্রিয় সমাধান চাই। আমি এখনও এর জন্য নির্দেশনা খুঁজে পাইনি, তবে কয়েকটি ইঙ্গিত:


1

ব্রাউজারগুলি জুড়ে এই প্রভাবটি অর্জন করতে আপনি মায়াজেল এর প্যাটার্নাইজার jQuery প্লাগইন ব্যবহার করতে পারেন । এই সময়ে, কেবল সিএসএস দিয়ে এটি করার কোনও ক্রস-ব্রাউজারের উপায় নেই।

আপনি class="background-clip"এইচটিএমএল উপাদানগুলিতে যুক্ত করে প্যাটার্নাইজার ব্যবহার করেন যেখানে আপনি পাঠ্যটি চিত্রের প্যাটার্ন হিসাবে আঁকতে চান এবং একটি অতিরিক্ত data-pattern="…"বৈশিষ্ট্যে চিত্রটি নির্দিষ্ট করুন । উৎস দেখুন ডেমো । প্যাটার্নাইজারটি প্যাটার্নে ভরা পাঠ্য সহ একটি এসভিজি চিত্র তৈরি করবে এবং স্বচ্ছভাবে সরবরাহিত এইচটিএমএল উপাদানগুলিতে এটি আন্ডারল করবে।

যদি, প্রশ্নের উদাহরণ চিত্রের মতো, পাঠ্য পূরণের প্যাটার্নটি "প্যাটার্নাইজড" উপাদানটির বাইরে প্রসারিত কোনও পটভূমির চিত্রের অংশ হওয়া উচিত, আমি দুটি বিকল্প দেখতে পাচ্ছি (অনির্ধারিত, আমার প্রিয় প্রথম):

  • এসভিজিতে একটি পটভূমি চিত্রের পরিবর্তে মাস্কিং ব্যবহার করুন। মতই ওয়েব-টিকি এর উত্তর , যা Patternizer ব্যবহার এখনও করা SVG স্বয়ংক্রিয় জেনারেশন এবং উপরে অদৃশ্য HTML উপাদান যে পাঠ্য নির্বাচন এবং অনুলিপি পারবেন যোগ হবে হবে।
  • অথবা প্যাটার্ন চিত্রটির স্বয়ংক্রিয় প্রান্তিককরণ ব্যবহার করুন। গিজসের উত্তরের মতো জাভাস্ক্রিপ্ট কোড দিয়ে করা যেতে পারে ।

1

শুধু যে সিএসএস রাখুন

    .banner-sale-1 .title-box .title-overlay {
      font-weight: 900;
      overflow: hidden;
      margin: 0;
      padding-right: 10%;
      padding-left: 10%;
      text-transform: uppercase;
      color: #080404;
      background-color: rgba(255, 255, 255, .85);

      /* that css is the main think (mix-blend-mode: lighten;)*/
      mix-blend-mode: lighten;

    }

1

ডেমো স্ক্রিনশট

আমার মূল পাঠ্যের মতো দেখতে এমন পাঠ্য তৈরি করা দরকার ছিল, তবে ব্যাকগ্রাউন্ড সজ্জিত করে আমি এটি জাল করতে পারি না, কারণ উপাদানটির পিছনে কিছু অ্যানিমেশন রয়েছে। কেউ এখনও এটিকে পরামর্শ দিয়েছে বলে মনে হয় না, তাই আমি যা করেছি তা এখানে দেওয়া হয়েছে: (এটি যতটা সম্ভব পড়ার জন্য সহজ করার চেষ্টা করা হয়েছিল))

var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.

//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;

//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//Relevant Helper Functions:
function centeredDiv(parent) {
    //Container:
    var d = document.createElement('div'), s = d.style;
    s.display = "table"; s.position = "relative"; s.zIndex = 999;
    s.top = s.left = 0; s.width = s.height = "100%";
    //Content Box:
    var k = document.createElement('div'), j = k.style;
    j.display = "table-cell"; j.verticalAlign = "middle";
    j.textAlign = "center"; d.appendChild(k);
    parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
    var d = document.createElement('div');
    if(tCont) d.textContent = tCont;
    parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
    var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
    context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
    return context.measureText(text).width;
}

কেবল এটি আপনার উইন্ডোতে ফেলে দিন onআনলোড করুন, আপনার চিত্রের সাথে দেহের পটভূমি সেট করুন এবং যাদুটি ঘটবে দেখুন!


0

সিএসএস দিয়ে এখনই সম্ভব নয় আমি ভয় পাচ্ছি।

আপনার সেরা বেটটি কেবল একটি চিত্র (সম্ভবত কোনও পিএনজি) ব্যবহার করা এবং এটিতে ভাল Alt / শিরোনাম পাঠ্য রাখা।

বিকল্পভাবে আপনি একটি স্প্যান বা একটি ডিআইভি ব্যবহার করতে পারেন এবং চিত্রটির ব্যাকগ্রাউন্ড হিসাবে এটি আপনার টেক্সটের সাথে এসইওর উদ্দেশ্যে করতে চান তবে এটি স্ক্রিনের বাইরে টেক্সট-ইনডেন্ট করতে পারেন।


হ্যাঁ তুমি সঠিক. আমি সম্ভবত এসইও পয়েন্টগুলি না হারিয়ে ছবিগুলি ব্যবহার করতে পারি তবে আপনি এখনও পাঠ্য নির্বাচন করতে পারবেন না, পৃষ্ঠায় সন্ধান করতে পারবেন, লিঙ্কিং আরও জটিল হবে, এবং পাঠ্য আপডেট করার জন্য এটি আরও অনেক বেশি কাজ হবে ...: /
প্রেমের ডেজার

0

mix-blend-mode এই ধরণের প্রভাবের সম্ভাবনাও।

mix-blend-modeCSS এর সম্পত্তি সেট কিভাবে একটি উপাদান বিষয়বস্তু উপাদান এর অভিভাবক বিষয়বস্তু এবং উপাদান এর পটভূমি সহ মিশান করা উচিত নয়।

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.