CSS ব্যবহার করে পাঠ্য লুকান ide

Question

আমার এইচটিএমএলে এই জাতীয় ট্যাগ রয়েছে:

<h1>My Website Title Here</h1>

সিএসএস ব্যবহার করে আমি পাঠ্যটি আমার আসল লোগোতে প্রতিস্থাপন করতে চাই। ট্যাগটি পুনরায় আকার দেওয়ার ও CSS এর মাধ্যমে একটি পটভূমি চিত্র স্থাপনের মাধ্যমে লোগোটিতে আমার কোনও সমস্যা নেই। যাইহোক, আমি কীভাবে পাঠ্য থেকে মুক্তি পাব তা বুঝতে পারি না। আমি মূলত স্ক্রিন থেকে পাঠ্যটি চাপ দিয়ে এটি আগে দেখেছি। সমস্যাটি আমি কোথায় দেখেছি তা মনে করতে পারছি না।

Comments

এখানে সেকেলে উত্তর প্রচুর আছে: আরও সাম্প্রতিক উত্তর upvoting বিবেচনা stackoverflow.com/a/27769435/2586761 এটা প্রকাশ করার

— ptim

Answer 1

এটি একটি উপায়:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

ব্রাউজারটি তৈরি করবে এমন বিশাল 9999 পিক্সেল বাক্সটি এড়িয়ে গিয়ে পাঠ্য আড়াল করার আরও একটি উপায় এখানে রয়েছে :

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Comments

দীর্ঘ শিরোনামগুলির এই পদ্ধতিতে একটি সমস্যা থাকবে কারণ কেবল শব্দ-মোড়কের আগে লেখাটি ইন্টেন্ট করা হয়েছে, এবং

— ডাব্লু

আপনি যদি এই পদ্ধতিটি ব্যবহার করেন তবে আপনার বামদিকে (বিশেষত লিঙ্কগুলি সহ) সিডের সিলেকশন বক্সের শুটিং রোধ করতে "ওভারফ্লো: লুকানো" যুক্ত করা উচিত

— উইলোলার

Youণাত্মক পাঠ্য-ইনডেন্টের সাথে উপাদানগুলির মধ্যে আপনার যদি কোনও লিঙ্ক থাকে তবে নিশ্চিত হয়ে নিন যে আপনি "আউটলাইন: কিছুই নয়" উল্লেখ করেছেন অন্যথায় আপনি পর্দার বাম দিকে একটি বিন্দুযুক্ত সীমানা পেয়ে যাবেন border

— নিকফ

আমি 'টেক্সট-ইনডেন্ট: -9999px' ব্যবহার করতে পছন্দ করি কেবল টেক্সটটি সত্যিই স্ক্রিন থেকে দূরে চলেছে তা নিশ্চিত করার জন্য। কিছুটা ডিফেন্সিভ প্যারানিয়া।

— অ্যান্ডি ফোর্ড

আপনার পাঠ্যটি কেবল প্রথম লাইনটি ইন্ডেন্টড থাকলে লম্বা থাকলে নিরাপদ দিকে থাকতে 'হোয়াইট-স্পেস: এখনই্রেপ করুন' যুক্ত করুন।

— অ্যান্ড্রু মুর

Answer 2

কেন সহজভাবে ব্যবহার করবেন না:

h1 { color: transparent; }

Comments

কেন না? কারণ গুগল এটি পছন্দ করে না।

— alekwisnia

বৈধকরণ (সিএসএস 2.1): 'স্বচ্ছ' 'রঙ' বৈশিষ্ট্যের জন্য একটি বৈধ মান নয়।

— হাসানজি

ব্যবহারকারী এটিটি বাছাই করলে পাঠ্যটি দৃশ্যমান হয়ে উঠবে (এসআরটিজি + এ ইত্যাদি) - এটি দেখতে অকার্যকর বলে মনে হচ্ছে! শুভেচ্ছা ক্রিস্টোফার

— ক্রিস্টোফার স্টক

@ হাসানগেরসয় এবং ভবিষ্যতের গুগলস- "সিএসএস 3 'স্বচ্ছ' কীওয়ার্ড অন্তর্ভুক্ত করার জন্য রঙের মান

— বাড়িয়েছে

color: transparent;বরাবর কাজ করে user-select: none;, যদি না আপনি রঙ অগ্রাহ্য করে।

— stan-z

Answer 3

font-size: 0;পাঠ্যে আপনার উপাদানটিতে কেবল যুক্ত করুন।

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

Comments

এটাই আমার দরকার ছিল। আমি একটি ডিভিতে যা ছিল তা লুকিয়ে রাখতে চেয়েছিলাম, তবে সন্তানের স্প্যানগুলিতে কী ছিল তা দেখান (তাদের মধ্যে বিরামচিহ্নগুলি আড়াল করতে)।

— মিসকফিশার

এটি সবচেয়ে যৌক্তিক (পড়ুন: স্বল্প বিচিত্র) পদ্ধতির মতো বলে মনে হচ্ছে - তবে আমি ভাবছি যে এটি বিভিন্ন ব্রাউজারগুলিতে কতটা সমর্থিত? (আমি এটি ফায়ারফক্সে কাজ করে তা নিশ্চিত করতে পারি))

— ব্রায়ান ল্যাসি

এটি এখনও কেবল আই 7 এর চেয়ে বেশি ব্রাউজারে পাঠ্যটিকে খুব ছোট দেখায়, এটি কোনও সম্পূর্ণ ক্রস ব্রাউজার সমাধান নয়।

— macguru2000

আমি ক্রম 27, ফায়ারফক্স 17, উইন্ডোজ 5.1.7 এর জন্য সাফারি, অপেরা 12.12, আইই 8, আই 9, আই 10 - এ ফন্ট-আকার: 0} কৌশল পরীক্ষা করেছি it এটি সমস্ত ব্রাউজারে কাজ করে। এই কৌশলটি সেরা যদি আপনি নিজেই উপাদানটিতে ব্যাকগ্রাউন্ড-চিত্রটি সেট না করতে পারেন (যেমন আপনি দৃ tight়ভাবে প্যাকযুক্ত স্প্রিট চিত্র ব্যবহার করছেন এবং প্রয়োজনীয় আইকনটির চারপাশে যথেষ্ট খালি প্যাডিং নেই), এবং ছদ্ম নির্বাচক ব্যবহার করতে হবে , উদাহরণস্বরূপ উপাদান: ব্যাকগ্রাউন্ড চিত্র প্রদর্শন করার পরে।

— বেলুগা

এটি ডিভের আকারও পরিবর্তন করে, তাই আমি এটি প্রস্তাব করি না।

— স্টিফান বিজজিটার

Answer 4

সবচেয়ে ক্রস ব্রাউজারের বন্ধুত্বপূর্ণ উপায় হ'ল এইচটিএমএল লিখুন

<h1><span>Website Title</span></h1>

তারপরে স্প্যানটি লুকিয়ে রাখতে এবং চিত্রটি প্রতিস্থাপন করতে CSS ব্যবহার করুন

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

আপনি যদি সিএসএস 2 ব্যবহার করতে পারেন তবে contentসম্পত্তিটি ব্যবহারের আরও কিছু ভাল উপায় রয়েছে তবে দুর্ভাগ্যক্রমে ওয়েবটি এখনও সেখানে 100% নেই।

Comments

তবে চিত্রটির প্রস্থ এবং উচ্চতার বৈশিষ্ট্যটিও নির্ধারণ করা নিশ্চিত করুন - এবং নিশ্চিত করুন যে "প্যাডিং" এবং "মার্জিন" সেট করা আছে কারণ এইচ 1 ট্যাগের কত প্যাডিং / মার্জিনের ব্রাউজারগুলির বিভিন্ন ধারণা রয়েছে।

চিত্রগুলি বন্ধ করা থাকলে, বা যদি কোনও সিএসএস-সচেতন বট প্রদর্শিত হয় তবে শিরোনামটি দৃশ্যমান হবে না here

— উইলোলার

প্রদর্শনের মধ্যে গুরুত্বপূর্ণ পাঠ্যটি সম্ভবত সার্চ ইঞ্জিন বট এবং স্ক্রিন পাঠকদের দ্বারা মিস করা হবে না। পরিবর্তে পাঠ্য-ইনডেন্ট ব্যবহার করুন।

— dylanfm

এটি কোনও কাজ করবে না, ওপি শিরোনামের পাঠ্যটিও সরিয়ে ফেলবে। স্ক্রিন পাঠকরা ডিসপ্লে ছাড়া কিছুই করেন না ..

— ইদ্রিস ডপিকো পেঁয়া

Answer 5

অ্যাক্সেসযোগ্যতার কথা মাথায় রেখে পাঠ্য গোপন করা:

অন্যান্য উত্তরগুলি ছাড়াও, এখানে পাঠ্য গোপনের জন্য আরেকটি দরকারী পদ্ধতি রয়েছে।

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

এটি উল্লেখ করার মতো যে এই ক্লাসটি বর্তমানে বুটস্ট্র্যাপ 3 এ ব্যবহৃত হচ্ছে ।

---

আপনি যদি অ্যাক্সেসযোগ্যতা সম্পর্কে পড়তে আগ্রহী হন:

• ওয়েব অ্যাক্সেসিবিলিটি ইনিশিয়েটিভ (ডাব্লুআইএআই)

• MDN অ্যাক্সেসিবিলিটি ডকুমেন্টেশন

Comments

বিএস 4 এবং এইচ 5 বিপি-এর উত্স: github.com/h5bp/html5-boilerplate/blob/master/src/css/… , github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/…

— পিটিএম

এটি উপাদানটি যুক্ত করার জন্য ভাল কাজ করে কেবল পর্দার পাঠক; যাইহোক, এটি মূল প্রশ্নের সাথে কাজ করে না যেখানে কোনও চিত্র সিএসএসে নির্দিষ্ট করা ব্যাকগ্রাউন্ড চিত্র দ্বারা প্রদর্শিত হবে।

— vossad01

@ ভস্যাড0১ - আপনি যদি অন্য উপাদান যুক্ত করতে না পারেন এবং আপনি কোনও একক উপাদানের সাথে আটকে থাকেন (যেমনটি আপনি উল্লেখ করেছেন সেই ক্ষেত্রে), তবে একটি ভাল কাজ হ'ল ছদ্ম-উপাদানটি ব্যবহার করা ... এছাড়াও, আমি এটি পোস্ট করেছি প্রাথমিক প্রশ্ন জিজ্ঞাসার 6 বছর পরে উত্তর, এবং এই উত্তরটি জনপ্রিয় হিসাবে দেখা যাচ্ছে বলে আমার উত্তরটি বৃহত্তর শ্রোতাদের টার্গেট করার উদ্দেশ্যে করা হয়েছিল।

— জোশ ক্রোজিয়ার

Answer 6

জেফ্রি জেলডম্যান নিম্নলিখিত সমাধানের পরামর্শ দেন:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

এটির তুলনায় কম সংস্থান করা উচিত -9999px;

এখানে এটি সম্পর্কে সমস্ত পড়ুন:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 7

শক্তি এবং দুর্বলতাগুলির সাথে প্রতিটি কৌশলটির দুর্দান্ত সংক্ষিপ্তসার জন্য mezzoblue দেখুন , উদাহরণস্বরূপ html এবং CSS ss

Answer 8

অনেক জটিল সমাধান।

সহজতমটি হ'ল সহজভাবে ব্যবহার করা:

color:rgba(0,0,0,0)

Comments

গ্রেট! এটি যে কোনও পটভূমির রঙের জন্য কাজ করে। ধন্যবাদ।

— সন্দীপ অমরনাথ

Answer 9

এই বৈশিষ্ট্যটি যুক্ত করে আপনি কেবল নিজের পাঠ্যটি আড়াল করতে পারেন:

font size: 0 !important;

Comments

!importantআপনার ক্ষেত্রে এই ধারাটি আসলে প্রয়োজন কিনা তাও খতিয়ে দেখার দরকার। আমার ক্ষেত্রে এটি এটি ছাড়া ভাল কাজ করে।

— এরিক সোভেন পিউডিস্ট

Answer 10

ব্যবহার করবেন না { display:none; }এটি সামগ্রীকে অ্যাক্সেসযোগ্য করে তোলে। আপনি চাইছেন যে স্ক্রিন-পাঠক আপনার সামগ্রীটি দেখতে এবং দৃষ্টিভঙ্গিটি কোনও চিত্রের (একটি লোগোর মতো) প্রতিস্থাপনের মাধ্যমে এটি স্টাইল করুন। text-indent: -999px;অনুরূপ পদ্ধতি ব্যবহার করে বা পাঠ্যটি এখনও রয়েছে - কেবল দৃশ্যমানভাবে নয়। ব্যবহার করুন display:none, এবং পাঠ্যটি চলে গেছে।

Answer 11

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

উপরেরগুলি সর্বশেষ থান্ডারবার্ডেও ভাল কাজ করে।

Comments

নোট করুন যে এই পদ্ধতিটি ব্যবহারটি

— জর্দান লেভ

Answer 12

আপনি CSS background-imageবৈশিষ্ট্যটি ব্যবহার করতে পারেন এবং z-indexচিত্রটি টেক্সটের সামনে রয়েছেন তা নিশ্চিত করতে।

Comments

উদাহরণ? আমি কীভাবে z-indexপ্রযোজ্য তা দেখছি না background-image।

— মার্টিনাস জুসেভিয়াস

Answer 13

আপনি কেন ব্যবহার করবেন না:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

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

Answer 14

উত্তরটি সম্পত্তি সহ একটি স্প্যান তৈরি করা

{display:none;}

আপনি এই সাইটে একটি উদাহরণ খুঁজে পেতে পারেন

Comments

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

— মারভো

Answer 15

এটি প্রকৃতপক্ষে আলোচনার জন্য একটি উপযুক্ত ক্ষেত্র, এতে অনেকগুলি সূক্ষ্ম কৌশল উপলব্ধ। আপনার প্রয়োজনীয়তা পূরণের জন্য এমন একটি কৌশল নির্বাচন করা বা বিকাশ করা গুরুত্বপূর্ণ যেগুলি সহ: স্ক্রিন পাঠক, চিত্র / সিএসএস / স্ক্রিপ্টিং অন / অফ কম্বিনেশন, এসইও ইত্যাদি meets

স্ট্যান্ডার্ডিস্টা চিত্র প্রতিস্থাপনের কৌশলগুলি শুরু করার জন্য এখানে কয়েকটি ভাল সংস্থান রয়েছে:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Answer 16

বিভিন্ন ব্রাউজারের জন্য ব্যবহার করুন অবস্থা ট্যাগ এবং ব্যবহার CSS স্থানে আছে height:0pxএবং width:0pxএছাড়াও আপনি জায়গা আছে font-size:0px।

Answer 17

বিন্দুটি যদি সহজেই উপাদানটির ভিতরে পাঠ্যটি অদৃশ্য করা হয় তবে একটি আরজিবা মান যেমন color:rgba(0,0,0,0);পরিষ্কার এবং সরল ব্যবহার করে রঙের বৈশিষ্ট্যটি 0 ধূসর করে সেট করুন ।

Answer 18

আমি কোথায় এটিকে তুলেছিলাম তা মনে নেই, তবে যুগ যুগ ধরে এটি সফলভাবে ব্যবহার করে আসছি।

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

আমার মিক্সিনটি সাসে রয়েছে তবে আপনি এটি যে কোনও উপায়ে ফিট দেখতে পারেন। ভাল পরিমাপের জন্য আমি .hiddenসদৃশ এড়াতে উপাদানগুলিতে সংযুক্ত করতে আমার প্রকল্পের কোথাও কোনও শ্রেণি রাখি।

Comments

আমি মনে করি আমি কোথাও পড়েছি যে এই সংস্করণটি অগ্রাধিকার পেয়েছে কারণ একটি নেতিবাচক পাঠ্য-ইনডেন্ট ব্রাউজারকে একটি 10000px (বা আপনি যে উদাহরণই ব্যবহার করুন) লম্বা বাক্সে রেন্ডার করবে। এই উদাহরণ হিসাবে ফন্টটি পরিবর্তন করার ফলে ব্রাউজারটি এটি রেন্ডার করার চেষ্টা করে এমন একটি বৃহত বাক্স তৈরি করবে না।

— গাম্বো

Answer 19

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Comments

কেন লাইন উচ্চতা?

— সানড্রোক

Answer 20

পাঠ্যকে সংক্ষিপ্ত করে এবং আড়াল করতে এই কোডটি ব্যবহার করে দেখুন

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

বা আপনার সিএসএস ক্লাসে ব্যবহার লুকানোর জন্য .hidetxt { visibility: hidden; }

Answer 21

সিএসএসের সাহায্যে কন্টেন্ট রিপ্লেস করুন

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Answer 22

আমি সাধারণত:

span.hide
{
  position:fixed;
  right:-5000px;
}

Answer 23

যদি আমরা মার্কআপটি সম্পাদনা করতে পারি, জীবন সহজতর হতে পারে, কেবল পাঠ্য সরিয়ে ফেলুন এবং সুখী হও তবে কখনও কখনও মার্কআপটি জেএস কোড দ্বারা স্থাপন করা হত বা আমাদের কেবল এটি সম্পাদন করার অনুমতি দেওয়া হয় না, খুব খারাপ সিএসএস আমাদের নিষ্পত্তিস্থলে রাখা একমাত্র অস্ত্র হিসাবে পরিণত হয়।

আমরা <span>পাঠ্যটি মোড়ানো করতে পারি এবং পুরো ট্যাগটি আড়াল করতে পারি না । যাইহোক, কিছু ব্রাউজারগুলি কেবলমাত্র উপাদানগুলির সাথে গোপন করে নাdisplay:none তবে অভ্যন্তরের উপাদানগুলি অক্ষম করে।

উভয় font-size:0pxএবংcolor:transparent ভাল সমাধান হতে পারে তবে কিছু ব্রাউজার সেগুলি বুঝতে পারে না। আমরা তাদের উপর নির্ভর করতে পারি না।

আমার পরামর্শ:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

ব্যবহার overflow:hiddenকরে আমাদের প্রস্থ এবং উচ্চতা প্রয়োগ করে । কিছু ব্রাউজার (তাদের ... নাম করা হবে না আইই ) প্রস্থ এবং যেমন উচ্চতা পড়তে পারে min-widthএবং min-height। আমি বাক্সটি বাড়ানো থেকে আটকাতে চাই।

Answer 24

উপাদানটির জন্য font-sizeএবং শূন্যের মানটি ব্যবহার করা line-heightআমার পক্ষে কৌশলটি করে:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

Answer 25

এইচটিএমএল থেকে পাঠ্যটি আড়াল করতে CSS তে পাঠ্য-ইনডেন্ট সম্পত্তি ব্যবহার করুন

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * ডায়নামিক পাঠ্যের জন্য আপনাকে সাদা-স্থান যুক্ত করতে হবে, সুতরাং আপনার প্রয়োগকৃত CSS টি বিরক্ত হবে না। নর্যাপের অর্থ পাঠ্যটি কখনই পরের লাইনে মোড়বে না, কোনও <br>ট্যাগ না আসা পর্যন্ত পাঠ্য একই লাইনে চলতে থাকে

Answer 26

আমি এটি অর্জন করার অন্যতম উপায় হ'ল ব্যবহার করা :beforeবা :after। আমি কয়েক বছর ধরে এই পদ্ধতির ব্যবহার করেছি এবং বিশেষত গ্লাইফ ভেক্টর আইকনগুলির সাথে দুর্দান্ত কাজ করে।

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

Answer 27

এটি আমার জন্য স্প্যান (নকআউট বৈধতা) নিয়ে কাজ করেছে।

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

Answer 28

আমার জন্য কার্যকর একটি সমাধান:

এইচটিএমএল

<div class="website_title"><span>My Website Title Here</span></div>

সিএসএস

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

Answer 29

সেরা উত্তরটি সংক্ষিপ্ত পাঠ্যের জন্য কাজ করে, তবে যদি পাঠ্যটি মোড়ানো হয় তবে এটি চিত্রটিতে প্রদর্শিত হবে।

এটি করার এক উপায় হ'ল জ্যাকুরি হ্যান্ডলারের সাথে ত্রুটি ধরা। কোনও চিত্র লোড করার চেষ্টা করুন, যদি এটি ব্যর্থ হয় তবে এটি ত্রুটি ছুঁড়ে।

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

স্যাম্পল কোড দেখুন

Answer 30

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করে ।

— বেনিয়ামিন ডাব্লু।