সিএসএসে কোনও ইমগ ট্যাগের src বৈশিষ্ট্যের সমতুল্য সেট করা সম্ভব?

531

সিএসএসে srcঅ্যাট্রিবিউট মানটি সেট করা সম্ভব ? বর্তমানে, আমি যা করছি তা হ'ল:

<img src="pathTo/myImage.jpg"/>

এবং আমি এটি কিছু এই হতে চান

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

আমি সিএসএসে সম্পত্তি বা বৈশিষ্ট্য ব্যবহার না করে এটি করতে চাই ।backgroundbackground-image:

html  css  image 
— রাকেশ জুয়াল
সূত্র
1
এটি স্পষ্টতই CSS3 এ সম্ভব হতে চলেছে: w3.org/TR/css3-values/#attribute
— গ্রাফিকডাইভাইন
7
এটা এখন সম্ভব। ক্রোম / সাফারি / অপেরা উপর পরিক্ষিত: stackoverflow.com/a/11484688/632951
— Pacerier
2
তবে ফায়ারফক্স 30.0, ইন্টারনেট এক্সপ্লোরার 11.0 সমর্থন করে না
— লক্ষ্মীকান্ত ডাঙে
এই সিএসএসের সমাধানটি আমার জন্য কাজ করেছে (সমস্ত ব্রাউজারে): stackoverflow.com/a/19114098/448816 , ব্যতীত আমাকে যুক্ত করতে হয়েছিল: 'ব্যাকগ্রাউন্ড-আকার: 100%;'।
— মিখাইল-টি
(2020) আপনি জেএস এর সাথে এটি getPropertyValue("--src")দেখতে পারেন: jsfiddle.net/CustomElementsExample/vjfpu3a2
— ড্যানি '365CSI' এঞ্জেলম্যান

উত্তর:

880

ব্যবহার content:url("image.jpg")।

সম্পূর্ণ কার্যক্ষম সমাধান ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
স্নিপেট প্রসারিত করুন

পরীক্ষিত এবং কাজ করছে:

  • ক্রোম 14.0.835.163
  • সাফারি 4.0.0
  • অপেরা 10.6

পরীক্ষিত এবং কাজ করছে না :

  • ফায়ারফক্স ৪০.০.২ (বিকাশকারী নেটওয়ার্ক সরঞ্জাম পর্যবেক্ষণ করে, আপনি দেখতে পারেন যে ইউআরএল লোড হয় তবে চিত্রটি প্রদর্শিত হয় না)
  • ইন্টারনেট এক্সপ্লোরার 11.0.9600.17905 (ইউআরএল কখনও লোড হয় না)
— Pacerier
সূত্র
7
@ gotqn, এখন পর্যন্ত কেবল ক্রোম সাফারি অপেরা।
— পেসারিয়ার
36
@ এরিকজি, বিভিন্ন অ্যাপ্লিকেশনগুলির বিভিন্ন প্রয়োজনীয়তা রয়েছে। এটি আপনার প্রয়োজনীয়তার সাথে মানানসই না হলে এটি ব্যবহার করবেন না। যদি এটি হয়, এটি ব্যবহার করুন।
— পেসারিয়ার
4
IE10 কাজ না করা কোনও উপায় নয়। আমরা আইই 7 খনন করি (আসুন আই আই 6 সম্পর্কে কথা বলি না)। প্রয়োজনে আইই 8ও। তবে আই 9 9 - আই 10 ... না।
— রলফ
11
ওয়ার্থ যোগ করার জন্য যে এমনকি ব্রাউজারে সমর্থন স্থাপনে contentকরতে img, এটা তার আচরণ পরিবর্তন। চিত্রটি আকারের বৈশিষ্ট্যগুলি উপেক্ষা করতে শুরু করে এবং ক্রোম / সাফারিতে এটি 'চিত্র সংরক্ষণ করুন' এর মতো প্রসঙ্গ মেনু বিকল্পগুলি হারাতে পারে। এটি কারণ contentকার্যকরভাবে কার্যকর imgকরা শূন্য প্রতিস্থাপিত উপাদান থেকে অন্যরকম কিছুতে রূপান্তর করে <span><img></span>।
— ইলিয়া স্ট্রেলটসিন
3
সঠিক ব্রাউজার সমর্থন ব্যতীত আমি এটিকে বৈধ উত্তর হিসাবে দেখছি না, দুঃখিত sorry
— ইমাচাইন
183

আমি আজ একটি সমাধান পেয়েছি (আই 6+, এফএফ, অপেরা, ক্রোমে কাজ করে):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

কিভাবে এটা কাজ করে:

  • চিত্রটি প্রশস্ততা এবং উচ্চতার দ্বারা আর দৃশ্যমান না হওয়া পর্যন্ত সঙ্কুচিত হবে।
  • তারপরে, আপনাকে প্যাডিং সহ চিত্রের আকারটি 'রিসেট' করতে হবে। এটি একটি 16x16 চিত্র দেয়। অবশ্যই আপনি আয়তক্ষেত্রাকার চিত্রগুলি তৈরি করতে প্যাডিং-বাম / প্যাডিং-শীর্ষ ব্যবহার করতে পারেন।
  • অবশেষে, নতুন চিত্রটি সেখানে পটভূমি ব্যবহার করে রাখা হয়েছে।
  • যদি নতুন ব্যাকগ্রাউন্ড চিত্রটি খুব বড় বা খুব ছোট হয় তবে আমি background-sizeউদাহরণ হিসাবে ব্যবহারের পরামর্শ দিচ্ছি : background-size:cover;যা বরাদ্দকৃত জায়গায় আপনার চিত্রকে ফিট করে।

এটি জমা-ইনপুট-চিত্রগুলির জন্যও কাজ করে, তারা ক্লিকযোগ্য থাকে।

লাইভ ডেমো দেখুন: http://www.audenaerde.org/csstrick.html#imagereplacecss

উপভোগ করুন!

— RobAu
সূত্র
6
@ রবআনু: এটি বেশ ভালভাবে কাজ করে - জিসফিডাল
— টিমপাইট্রস্কি
9
এটি আপনার কাছে তুলে ধরতে পেরেছি যে এটি আকর্ষণীয় এবং চতুর, তবে একটি খালি ডিআইভি আরও সোজা-এগিয়ে।
— ভলমাইক
11
এই ক্ষেত্রে এটি হয়। তবে এমন কিছু মামলা রয়েছে যেখানে আপনি এইচটিএমএল নিয়ন্ত্রণ করতে পারবেন না এবং তবুও আইএমজি হেরফের করতে চান। সেখানে এই সমাধানটিও কাজ করবে
— রবআউ
2
যদি চিত্রটির একটি srcবৈশিষ্ট্য থাকে তবে এটি আপনার প্রয়োজনীয় কৌশল। +1 - আমাকে অনেক সাহায্য করেছে
— জেমস লং
3
এই উত্তরে র‌্যাঙ্কিং না করা, যা কিছু অ্যাপ্লিকেশনগুলির সমাধান হতে পারে, তবে এই পদ্ধতির একটি সীমাবদ্ধতা রয়েছে। চিত্র ফাইলটির রেন্ডারিংয়ের মাত্রাগুলির উপর আপনার কোনও নিয়ন্ত্রণ নেই। সাধারণ ব্যবহারে, আপনি যদি কোনও উত্সটিতে নির্দিষ্ট করে থাকেন তবে কোনও চিত্রের উচ্চতা-প্রস্থ নিয়ন্ত্রণ করতে পারেন। তবে এটি মূলত কোনও ব্যাকগ্রাউন্ড ইমেজযুক্ত ডিভ থেকে আলাদা নয়, যেখানে আপনার ডিভিও চিত্রের চেয়ে বড় হলে আপনার ভাগ্য নেই।
— তারকাস
113

সিএসএস থেকে চিত্র সেট করার সম্ভাব্য পদ্ধতির একটি সংগ্রহ

CSS2 এর :afterসিউডো-এলিমেন্ট বা CSS3 থেকে নতুন সিনট্যাক্স সহ::aftercontent: সম্পত্তি:

প্রথম ডব্লিউ 3 সি সুপারিশ: ক্যাসকেডিং স্টাইল শিটস, স্তর 2 সিএসএস 2 নির্দিষ্টকরণ 12 মে 1998
সর্বশেষ ডাব্লু 3 সি সুপারিশ : নির্বাচক স্তর 3 ডাব্লু 3 সি সুপারিশ 29 সেপ্টেম্বর 2011

এই পদ্ধতি appends কেবলমাত্র এমন সামগ্রী এড়িয়ে পর একটি উপাদান এর ডকুমেন্ট গাছ সামগ্রী অন্তর্ভুক্ত রয়েছে।

দ্রষ্টব্য: কিছু ব্রাউজার পরীক্ষামূলকভাবে কিছু উপাদান নির্বাচকদের এমনকি সর্বশেষতম ডাব্লু 3 সি সুপারিশকে উপেক্ষা করে contentসরাসরি সম্পত্তি রেন্ডার করে:

প্রযোজ্য: :beforeএবং :afterসিউডো-উপাদানগুলি

CSS2 সিনট্যাক্স (সামনের সামঞ্জস্যপূর্ণ): 

.myClass:after {
  content: url("somepicture.jpg");
}

CSS3 নির্বাচক: 

.myClass::after {
  content: url("somepicture.jpg");
}

ডিফল্ট রেন্ডারিং: আসল আকার (সুস্পষ্ট আকারের ঘোষণার উপর নির্ভর করে না)

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

কিন্তু এই লেখার সময়, একটি সঙ্গে আচরণ <IMG>ট্যাগ এখনও সংজ্ঞায়িত করা হয় না এবং যদিও এটি একটি ব্যবহার করা যেতে পারে গভীর ক্ষত এবং অ মান অনুবর্তী পথ , সঙ্গে ব্যবহার <img>বাঞ্ছনীয় নয় !

দুর্দান্ত প্রার্থী পদ্ধতি, সিদ্ধান্ত দেখুন ...

CSS1 এর background-image:সম্পত্তি:

প্রথম ডাব্লু 3 সি সুপারিশ: ক্যাসকেডিং স্টাইল শীট, স্তর 1 17 ডিসেম্বর 1996

এই সম্পত্তিটি একটি উপাদানের পটভূমি চিত্র সেট করে। একটি ব্যাকগ্রাউন্ড চিত্র সেট করার সময়, একটিতে একটি ব্যাকগ্রাউন্ড রঙ সেট করা উচিত যা যখন চিত্রটি অনুপলব্ধ থাকে তখন ব্যবহৃত হবে। চিত্রটি উপলভ্য হলে এটি পটভূমির রঙের উপরে laেকে দেওয়া হয়।

এই সম্পত্তিটি সিএসএসের শুরু থেকেই রয়েছে এবং তবুও এটি একটি গৌরবময় উল্লেখের যোগ্য।

ডিফল্ট রেন্ডারিং: আসল আকার (কেবল আকারে করা যায় না)

তবে ,

সিএসএস 3 এর background-size:সম্পত্তি একাধিক স্কেলিং বিকল্পের অনুমতি দিয়ে এতে উন্নতি করেছে:

সর্বশেষতম ডব্লিউ 3 সি স্থিতি: প্রার্থী সুপারিশ সিএসএস পটভূমি এবং সীমানা মডিউল স্তর 3 9 সেপ্টেম্বর 2014

[length> | <percentage> | auto ]{1,2} | cover | contain

এমনকি এই সম্পত্তি সহ, এটি ধারক আকারের উপর নির্ভর করে।

এখনও একটি ভাল প্রার্থী পদ্ধতি, সিদ্ধান্ত দেখুন ...

CSS2 এর list-style:সম্পত্তি সহ display: list-item:

প্রথম ডাব্লু 3 সি সুপারিশ: ক্যাসকেডিং স্টাইল শিটস, স্তর 2 সিএসএস 2 নির্দিষ্টকরণ 12 মে 1998

list-style-image: সম্পত্তি চিত্রটি সেট করে যা তালিকা আইটেম চিহ্নিতকারী হিসাবে ব্যবহার করা হবে (বুলেট)

তালিকার বৈশিষ্ট্যগুলি তালিকার মৌলিক ভিজ্যুয়াল বিন্যাস বর্ণনা করে: তারা স্টাইল শীটকে মার্কার ধরণের ( চিত্র , গালিফ বা সংখ্যা) নির্দিষ্ট করার অনুমতি দেয়

display: list-item- এই মানটির ফলে একটি উপাদান (উদাহরণস্বরূপ, <li>এইচটিএমএল) একটি প্রধান ব্লক বাক্স এবং একটি মার্কার বাক্স তৈরি করে।

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

শর্টহ্যান্ড সিএসএস: ( <list-style-type> <list-style-position> <list-style-image>) 

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

ডিফল্ট রেন্ডারিং: আসল আকার (সুস্পষ্ট আকারের ঘোষণার উপর নির্ভর করে না)

সীমাবদ্ধতা:

  • উত্তরাধিকার হ'ল 'তালিকা-শৈলী' মানগুলি ওল ও উল উপাদান থেকে এলআই উপাদানগুলিতে স্থানান্তর করবে। তালিকা শৈলীর তথ্য নির্দিষ্ট করার জন্য এটি প্রস্তাবিত উপায়।

  • তারা লেখককে তালিকার চিহ্নিতকারীর জন্য স্বতন্ত্র স্টাইল (রঙ, ফন্ট, প্রান্তিককরণ ইত্যাদি) নির্দিষ্ট করতে বা এর অবস্থানটি সামঞ্জস্য করতে দেয় না

এই পদ্ধতিটি <img>ট্যাগের জন্যও উপযুক্ত নয় কারণ উপাদান ধরণের মধ্যে রূপান্তর করা যায় না এবং এখানে সীমিত, অ-সঙ্গতিপূর্ণ হ্যাক যা ক্রোমে কাজ করে না।

ভাল প্রার্থী পদ্ধতি, সিদ্ধান্ত দেখুন ...

CSS3 এর border-image:সম্পত্তি সুপারিশ :

সর্বশেষতম ডব্লিউ 3 সি স্থিতি: প্রার্থী সুপারিশ সিএসএস পটভূমি এবং সীমানা মডিউল স্তর 3 9 সেপ্টেম্বর 2014

একটি ব্যাকগ্রাউন্ড-ধরণের পদ্ধতি যা এখন অবধি বিস্মৃত আকারে (এই ব্যবহারের ক্ষেত্রে সংজ্ঞায়িত নয়) এবং ফলব্যাক সীমান্ত বৈশিষ্ট্যগুলিতে নির্ভর করে (উদাঃ ): border: solid

মনে রাখবেন, যদিও এগুলি কখনও কোনও স্ক্রোলিং প্রক্রিয়া সৃষ্টি করে না, তবুও প্রারম্ভিক চিত্রগুলি পূর্বপুরুষ বা ভিউপোর্টের মাধ্যমে ক্লিপ করা যেতে পারে।

এই উদাহরণটিতে প্রকাশ ইমেজ হচ্ছে ক্ষান্ত শুধুমাত্র একটি নীচের ডানদিকের কোণের যেমন প্রসাধন :

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

প্রযোজ্য: অভ্যন্তরীণ টেবিল উপাদানগুলি বাদে সমস্ত উপাদান border-collapse: collapse

তবুও এটি কোনও ট্যাগ পরিবর্তন করতে পারে না (তবে এখানে একটি হ্যাক রয়েছে ), পরিবর্তে আমরা এটিকে সাজাইতে পারি:<img>src

কোড স্নিপেট দেখান

মান প্রচারের পরে ভাল প্রার্থী পদ্ধতি বিবেচনা করা উচিত।

সিএসএস 3 এর element()স্বরলিপি ওয়ার্কিং ড্রাফ্টও উল্লেখযোগ্য:

দ্রষ্টব্য: element()ফাংশনটি কেবলমাত্র রেফারেন্সযুক্ত উপাদানের উপস্থিতির পুনরুত্পাদন করে , প্রকৃত সামগ্রী এবং এর কাঠামো নয়।

<div id="img1"></div>

<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

আমরা ব্যবহার করব অনুষ্ঠিত বিষয়বস্তু দুই এক গোপন চিত্র চিত্র পরিবর্তন করতে পটভূমি মধ্যে #img1উপর ভিত্তি করে আইডি নির্বাচক CSS এর মাধ্যমে:

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

নোটস: এটি পরীক্ষামূলক এবং কেবল -mozফায়ারফক্সের উপসর্গের সাথে কাজ করে এবং কেবলমাত্র ওভার backgroundবা background-imageবৈশিষ্ট্যগুলির জন্যও নির্দিষ্ট আকারের প্রয়োজন।

উপসংহার

  1. যেকোন শব্দার্থক সামগ্রী বা কাঠামোগত তথ্য HTML এ যায়।
  2. স্টাইলিং এবং প্রেজেন্টাল তথ্য CSS এ যায়।
  3. এসইও উদ্দেশ্যে, সিএসএসে অর্থবহ চিত্রগুলি গোপন করবেন না ।
  4. প্রিন্ট করার সময় পটভূমি গ্রাফিক্স সাধারণত অক্ষম থাকে।
  5. কাস্টম ট্যাগগুলি সিএসএস থেকে ব্যবহৃত এবং স্টাইল করা যেতে পারে, তবে ইন্টারনেট এক্সপ্লোরারের আদিম সংস্করণগুলি বুঝতে পারে না) ( জাভাস্ক্রিপ্ট বা সিএসএস নির্দেশিকা ব্যতীত HTML5 ট্যাগগুলি (শিব সহ) স্টাইল করছে না ) ।
  6. ডিজাইনের মাধ্যমে এসপিএ'র (একক পৃষ্ঠাগুলি অ্যাপ্লিকেশন) সাধারণত পটভূমিতে চিত্রগুলি অন্তর্ভুক্ত করে

এটি বলার পরে, আসুন এইচটিএমএল ট্যাগগুলি চিত্রের প্রদর্শনের জন্য মাপসই:

<li>উপাদান [HTML4.01 + +]

পদ্ধতির list-style-imageসাথে পারফেক্ট ইউজকেস display: list-item।

<li>উপাদান, খালি হতে পারে, পারবেন প্রবাহিত বিষয়বস্তু এবং এটা এমনকি বাদ করার অনুমতি নেই </li>শেষ ট্যাগ।

কোড স্নিপেট দেখান

সীমাবদ্ধতা: স্টাইল থেকে শক্ত ( width:বা float:সাহায্য করতে পারে)

<figure>উপাদান [HTML5 এর + +]

চিত্রের উপাদানটি কিছু প্রবাহ সামগ্রী উপস্থাপন করে, .চ্ছিকভাবে একটি ক্যাপশন সহ, যা স্ব-অন্তর্ভুক্ত (সম্পূর্ণ বাক্যটির মতো) এবং সাধারণত নথির মূল প্রবাহ থেকে একক ইউনিট হিসাবে উল্লেখ করা হয়।

উপাদানটি কোনও বিষয়বস্তু সহ বৈধ নয়, তবে এটি একটি রাখার জন্য প্রস্তাবিত <figcaption>।

উপাদানটি এভাবে চিত্রের চিত্র, ডায়াগ্রাম, ফটো , কোড তালিকা ইত্যাদির টীকায় ব্যবহার করা যেতে পারে

ডিফল্ট রেন্ডারিং: বাম এবং ডান উভয় প্যাডিং সহ উপাদানটি ডানদিকে সংযুক্ত করা হয়েছে!

<object>উপাদান [শুধুমাত্র HTML4 + +]

চিত্রগুলি অন্তর্ভুক্ত করতে লেখকরা OBJECT উপাদান বা আইএমজি উপাদান ব্যবহার করতে পারেন।

dataঅ্যাট্রিবিউট প্রয়োজন বোধ করা হয় ও একটি বৈধ থাকতে পারে MIME প্রকার একটি মান হিসাবে! 

<object data="data:x-image/x,"></object>

দ্রষ্টব্য: <object>সিএসএস থেকে ট্যাগটি ব্যবহারের কৌশলটি হ'ল একটি কাস্টম বৈধ মাইমটাইপ সেট করা হবে যার x-image/xপরে কোনও ডেটা হয় না (প্রয়োজনীয় কমাতে কোনও মান নেই ,)

ডিফল্ট রেন্ডারিং: 300 x 150px, তবে আকারটি এইচটিএমএল বা সিএসএসে নির্দিষ্ট করা যেতে পারে।

<SVG>ট্যাগ

একটি এসভিজি সক্ষম ব্রাউজারের প্রয়োজন এবং <image>রাস্টার চিত্রগুলির জন্য একটি উপাদান রয়েছে

<canvas>উপাদান [HTML5 এর + +]।

widthথেকে অ্যাট্রিবিউট অক্ষমতা 300 , এবং heightথেকে অ্যাট্রিবিউট অক্ষমতা 150 ।

<input>সঙ্গে উপাদানtype="image"

সীমাবদ্ধতা:

... উপাদানটি বোতামের মতো এটি নির্দেশ করতে বোতামের মতো উপস্থিত হবে বলে আশা করা হচ্ছে।

কোন পাঠ্য না থাকলে ক্রোম 4x4px খালি স্কোয়ার অনুসরণ এবং রেন্ডার করে

আংশিক সমাধান, সেট value=" ": 

<input type="image" id="img1" value=" ">

এইচটিএমএল 5.1 এ আসন্ন <picture>উপাদানটি সন্ধান করুন , বর্তমানে একটি কার্যকরী খসড়া ।

— CSᵠ
সূত্র
(2020) ব্যবহার করুন CSS এর বৈশিষ্ট্য: stackoverflow.com/questions/2182716/...
— ড্যানি '365CSI' Engelman
দুর্দান্ত উত্তর কিন্তু প্রাথমিক আদিম সরবরাহের প্ল্যাটফর্ম হিসাবে ওয়েবে সম্পূর্ণ ব্যর্থতা দেখায়।
— সেরোসায়েস
26

আমি এই সিএসএস সহ খালি ডিভ সমাধানটি ব্যবহার করেছি:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

এইচটিএমএল:

<div id="throbber"></div>
— ইমানুয়েল টুজারি
সূত্র
আমি যদি এটিকে ইনলাইন প্রদর্শন করতে চাই? "ডিসপ্লে: ইনলাইন" যুক্ত করা আমার 0x0 এর দ্বি মাত্রা দেয় ...
— এলসুরুদো
1
@ ইয়েলসুরোডো প্রদর্শনটি ব্যবহার করুন: আপনি যদি কোনও ইনলাইন উপাদানের প্রস্থ এবং উচ্চতা নির্ধারণ করতে চান তবে ইনলাইন-ব্লক করুন
— এরিন
1
শীর্ষের উত্তর ফায়ারফক্সের সাথে কাজ করে না, তাই আপনার উত্তরটি আমি বেশি পছন্দ করি! এবং এটি পরিষ্কার এবং কোনও সিএসএস হ্যাক নেই।
— সের্গেই বোগদানভ
যদি আপনার একাধিক চিত্র প্রদর্শনের প্রয়োজন হয় তবে মনে রাখবেন আইডি ক্ষেত্রটি প্রযুক্তিগতভাবে অনন্য বলে মনে করা হয়, সুতরাং আইডিটির পরিবর্তে সিএসএস শ্রেণির নির্বাচক ব্যবহার করা আদর্শ।
— মিশ্র 3 ডি
প্রিন্ট সেটিংসে আপনার পটভূমি গ্রাফিক্স বন্ধ থাকলে এই ধরণের চিত্রগুলি সঠিকভাবে মুদ্রণ করবে না won't
— posfan12
14

আমি প্রস্তাবিত সমাধানগুলির চেয়ে ভাল উপায় খুঁজে পেয়েছি তবে এটি ব্যাকগ্রাউন্ড-চিত্রটি ব্যবহার করে। অনুগত পদ্ধতি (আইআই 6 এর জন্য নিশ্চিত করতে পারবেন না) ক্রেডিট: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

সিএসএস:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

পুরানো চিত্র দেখা যায় না এবং প্রত্যাশা অনুযায়ী নতুন দেখা যায়।


নিম্নলিখিত ঝরঝরে সমাধান কেবল ওয়েবকিটের জন্য কাজ করে

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}
— EricG
সূত্র
এটি একটি ঝরঝরে কৌশল, তবে এটি কি সত্যিই মানদণ্ডের সাথে সামঞ্জস্য হয়? W3C এর পৃষ্ঠা বলছেন contentসম্পত্তি শুধুমাত্র এতে প্রয়োগ :beforeএবং :afterছদ্ম ক্লাস। এছাড়াও, আপনার যদি আই 7 বা তার আগে contentসমর্থন করতে হয় তবে আমি মনে করি সমর্থনটি অস্তিত্বহীন। তবুও, খুব লোভনীয়।
— যাত্রীম
আপনি ঠিক বলেছেন, আমি আরও একটি অনুগত পদ্ধতি খুঁজে পেয়েছি। আমার পোস্ট আপডেট! এখন আমাকে ভোট দিন;) হাহা।
— এরিকজি
আপডেট হওয়া পদ্ধতির বিষয়বস্তুর উপর নির্ভরতার চেয়ে অবশ্যই ভাল। মূল লিঙ্কটি অন্তর্ভুক্ত করার জন্য ধন্যবাদ। এটি অন্তর্দৃষ্টিপূর্ণ ছিল। আপনি লক্ষ করবেন যে @ রবআউ এর উত্তরটিও আপনার আপডেট হওয়া সংস্করণটির সাথে খুব মিল।
— যাত্রীম
1
@ জাতিরম contentসম্পত্তি সমস্ত উপাদানগুলির জন্য প্রযোজ্য। http://www.w3.org/TR/css3-content/#content
— এক্সপি 1
13

তারা ঠিক. আইএমজি একটি সামগ্রী উপাদান এবং সিএসএস নকশা সম্পর্কে design তবে, আপনি যখন ডিজাইনের উদ্দেশ্যে কিছু সামগ্রী উপাদান বা বৈশিষ্ট্য ব্যবহার করবেন তখন কীভাবে? আমার ওয়েব পৃষ্ঠাগুলিতে আমার আইএমজি রয়েছে যা আমি স্টাইল (সিএসএস) পরিবর্তন করলে অবশ্যই পরিবর্তন করতে হবে।

ওয়েল এটি সিএসএস স্টাইলে আইএমজি উপস্থাপনা (সত্যিকারের চিত্র নয়) সংজ্ঞায়নের জন্য একটি সমাধান।

  1. 1x1 স্বচ্ছ জিআইএফ বা পিএনজি তৈরি করুন।
  2. সেই চিত্রটিতে আইএমজির যথাযথ "src" বরাদ্দ করুন।
  3. সিএসএস স্টাইলে "ব্যাকগ্রাউন্ড-চিত্র" দিয়ে চূড়ান্ত উপস্থাপনাটি সংজ্ঞায়িত করুন।

এটি যাদুমন্ত্রের মত কাজ করে :)

— অকপট
সূত্র
5
-1 আপনার উত্তরটি খারাপ না হলেও তিনি বিশেষভাবে উল্লেখ করেছেন যে তিনি ব্যবহার করতে চান নাbackground*
— freskoma
1
এটি একটি কৌশল ... আমার মতে কৌশলগুলি ব্রাউজারগুলি দ্বারা পরিবর্তন করা হবে ... এবং সকালে একদিন আপনি আপনার ওয়েবসাইটে একটি নরক দেখতে পাবেন: ডি :)))
— মাহদী জাজিনি
11

এখানে একটি খুব ভাল সমাধান দেওয়া হচ্ছে -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

প্রো (গুলি) এবং কন (গুলি):
(+) ভেক্টরের সাথে কাজ করে যে চিত্রটি আপেক্ষিক প্রস্থ / উচ্চতা (এমন একটি জিনিস যা রবউ'র উত্তর হ্যান্ডেল করে না)
(+) ক্রস ব্রাউজার ( আইই 8+ এর জন্যও কাজ করে)
(+) এটি কেবল সিএসএস ব্যবহার করে। সুতরাং img src পরিবর্তন করার দরকার নেই (বা যদি আপনার অ্যাক্সেস না থাকে / ইতিমধ্যে বিদ্যমান img src বৈশিষ্ট্যটি পরিবর্তন করতে চান না)।
(-) দুঃখিত, এটি ব্যাকগ্রাউন্ড CSS বৈশিষ্ট্যটি ব্যবহার করে না :)

— OviC
সূত্র
এখন, এটিই সঠিক সমাধান, সমস্ত ব্রাউজারে আমার জন্য কাজ করে, ধন্যবাদ !! আমি যুক্ত করতে হবে তা উল্লেখ করার মতো: ব্যাকগ্রাউন্ড-আকার: 100%; প্রতিস্থাপন চিত্রটি সঠিকভাবে প্রদর্শন করতে উপরের সিএসএস শ্রেণিতে সমাধান করতে।
— মিখাইল-টি
9

আপনি আপনার এইচটিএমএল কোডে 2 টি চিত্র নির্ধারণ করতে পারেন display: none;এবং কোনটি দৃশ্যমান হবে তা স্থির করতে ব্যবহার করতে পারেন।

— কোস্টাস অ্যান্ড্রিয়ানোপ্লোস
সূত্র
আমি ওয়েব রিসপন্সাল এমন একটি সমাধানের জন্য বহুদূর অনুসন্ধান করেছিলাম তবে এসইও বজায় রেখেছিলাম। আমি ব্যবহৃত ডিভাইসের উপর নির্ভর করে আমার চিত্র পরিবর্তন করতে সিএসএসে মিডিয়া কোয়েরিগুলি ব্যবহার করতে চেয়েছিলাম, তবে আমি আমার সামগ্রীটি এইচটিএমএলে রাখতে চাইছি। সিএসএসের উত্সগুলি ঘোষণা করা একটি রুট ছিল যা আমি নিতে চাইনি, তাই background-imageকোনও বিকল্প ছিল না। আমি imgএসইও উদ্দেশ্যে ট্যাগ চেয়েছিলেন । আপনার উত্তরটি খুব সহজ, মার্জিত এবং আমার সমস্ত বাধা সমাধান করে! সাবাস! এছাড়াও ব্যবহারকারীর উভয় চিত্রই ডাউনলোড করতে হবে না। তদ্ব্যতীত, আমি যে কোনও সংখ্যক চিত্র যুক্ত করতে পারি।
— জাভিয়ার
আমি এ পর্যন্ত পড়া প্রতিটি উত্তর আমাকে আমার স্টাইলশীটে আমার উত্সগুলি ঘোষণা করতে বাধ্য করবে, বা আমার মার্কআপে ইনলাইন সিএসএস ব্যবহার করবে। যার মধ্যেও আমি সন্তুষ্ট ছিলাম না। অগোছালো কোড!
— জাভিয়ার
7

না আপনি CSS এর মাধ্যমে চিত্র src বৈশিষ্ট্য সেট করতে পারবেন না। আপনি যে কাছাকাছি যেতে পারেন তা হ'ল, backgroundবা background-image। আমি যাইহোক এটি করার পরামর্শ দিচ্ছি না কারণ এটি কিছুটা অযৌক্তিক হবে।

তবে, আপনি উপলব্ধ ব্রাউজারগুলি যদি এটি ব্যবহার করতে সক্ষম হয় তবে আপনার কাছে একটি সিএসএস 3 সমাধান উপলব্ধ। content:url পেসারিয়ার উত্তরে বর্ণিত হিসাবে ব্যবহার করুন । নীচের অন্যান্য উত্তরগুলিতে আপনি অন্যান্য, ক্রস ব্রাউজার সমাধান পেতে পারেন।

— cletus
সূত্র
1
নিচে ভোট কেন? এই উত্তর গৃহীত উত্তরের চেয়ে আরও সঠিক।
— harsimranb
1
এখন পর্যন্ত সেরা উত্তর: না, আপনি এটি CSS এর মাধ্যমে করতে পারবেন না।
— মিলচে প্যাটার্ন
4

একটি "নিয়ন্ত্রণকারী" পাত্রে বেশ কয়েকটি চিত্র রাখুন এবং পরিবর্তে ধারকটির শ্রেণি পরিবর্তন করুন। সিএসএসে কনটেইনার শ্রেণীর উপর নির্ভর করে চিত্রের দৃশ্যমানতা পরিচালনা করতে নিয়ম যুক্ত করুন। এটি আ img srcসিঙ্গল ইমেজের সম্পত্তি পরিবর্তন করার মতো একই প্রভাব তৈরি করবে ।

এইচটিএমএল:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

সিএসএস:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

নোট করুন যে এটি সিএসএস backround-imageএর মতো সমস্ত চিত্র প্রিললোড করবে তবে img srcজেএস এর মাধ্যমে পরিবর্তিত হবে ।

— ব্রঙ্কস
সূত্র
3

বিকল্প উপায়

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
— Tukaz
সূত্র
3

কিছু তথ্য আমি এইচটিএমএল এ ছেড়ে যাব তবে সিএসএসে src সংজ্ঞায়িত করা আরও ভাল :

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
— রেনাত গ্যাটিন
সূত্র
2

যতদূর আমি সচেতন, আপনি পারবেন না। সিএসএস স্টাইল সম্পর্কে এবং চিত্রের এসআরসি বিষয়বস্তু is

— NawaMan
সূত্র
3
আজকাল, প্রায়শই চিত্রগুলি কেবল পৃষ্ঠাটি স্টাইল করার জন্য থাকে।
— লরেঞ্জো পলিডোরি
2
নিহিততাটি হ'ল সীমানা, ব্যাকগ্রাউন্ড ইত্যাদি হিসাবে ব্যবহৃত চিত্রগুলির মধ্যে এবং যেগুলি পৃষ্ঠা পৃষ্ঠার সামগ্রীর অংশ হিসাবে প্রকৃতপক্ষে পার্থক্য থাকতে পারে। ডায়াগ্রাম, নিবন্ধের ফটো ইত্যাদি
— রাইস ভ্যান ডের ওয়েয়ারডেন
1
আপনি করতে পারেন, এবং এমন সাধারণ, বৈধ কেস রয়েছে যেখানে আপনি চান।
— ryan0
2

পূর্বের সমাধানটির পুনরাবৃত্তি করা এবং খাঁটি সিএসএস বাস্তবায়নের উপর জোর দেওয়া আমার উত্তর।

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

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
— ড্যানিয়েল বাইর্ন
সূত্র
2

আমি জানি এটি একটি সত্যই পুরানো প্রশ্ন তবে কেন কোনও উত্তর কখনই করা যায় না তার সঠিক যুক্তি সরবরাহ করে না। আপনি যা যা খুঁজছেন "করতে" পারার সময় এটি বৈধ উপায়ে করতে পারবেন না। অর্ডার একটি বৈধ চিত্র ট্যাগ আছে এটা আবশ্যক src এবং Alt বৈশিষ্ট্যাবলী আছে।

সুতরাং যে কোনও উত্তরের জন্য এসআরসি বৈশিষ্ট্যটি ব্যবহার না করে এমন কোনও ইমিগ ট্যাগ দিয়ে এটি করার একটি উপায় দেয় যা অবৈধ কোড ব্যবহারের প্রচার করে।

সংক্ষেপে: আপনি যা খুঁজছেন তা সিনট্যাক্সের কাঠামোর মধ্যে আইনীভাবে করা যায় না।

উত্স: ডাব্লু 3 ভ্যালিডেটর

— Geowil
সূত্র
2

অথবা আপনি এটি করতে পারেন যা আমি আন্তঃস্বত্ত্বীয় জিনিসকে পেয়েছি।

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

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

একটি প্রকল্পে আমি এখন কাজ করছি আমি একটি নায়ক ব্লক টুইগ টেম্পলেট তৈরি করেছি

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
— Pocketninja
সূত্র
1

আপনি যদি কোনও পটভূমি সম্পত্তি সেট করতে না চান তবে আপনি কেবল সিএসএস ব্যবহার করে কোনও চিত্রের src বৈশিষ্ট্য সেট করতে পারবেন না।

বিকল্পভাবে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন এটি করার জন্য।

— গিলিয়াম ফ্লেন্ড্রে re
সূত্র
1

সিএসএস ব্যবহার করে এটি করা যায় না । তবে, আপনি যদি জিকিউরি ব্যবহার করছেন তবে এর মতো কিছু কৌশলটি করবে:

$("img.myClass").attr("src", "http://somwhere");
— ভীরা
সূত্র
প্রকৃতপক্ষে, এটি করতে পারে) এই একই প্রশ্নের উত্তরটি এখানে দেখুন: stackoverflow.com/questions/2182716/…
— মিখাইল-টি
1

আপনি এটি জেএস দিয়ে রূপান্তর করতে পারেন:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
— রাউল মার্টিন
সূত্র
0

আপনি যদি আপনার প্রকল্পের প্রেক্ষাপটের ভিত্তিতে গতিশীলভাবে একটি বোতামে একটি চিত্র যুক্ত করার চেষ্টা করছেন, আপনি এটি ব্যবহার করতে পারেন? উত্স রেফারেন্স নিতে একটি ফলাফলের উপর ভিত্তি করে। আমি এখানে আমার মডেলটিকে পর্যায়ক্রমে করতে এমভিভিএম ডিজাইন ব্যবহার করছি ha পর্যায়গুলির [0] মান নির্ধারণ করতে চাই যে আমি আমার বাটনটি হালকা পর্বের মানের ভিত্তিতে লাইটবাল্বের চিত্রগুলি চালু বা বন্ধ করে রাখতে চাই কিনা।

এই সাহায্য করে যদি নিশ্চিত না। আমি JqueryUI, ব্লুপ্রিন্ট এবং CSS ব্যবহার করছি। শ্রেণীর সংজ্ঞা আপনাকে যা পছন্দ করবে তার উপর ভিত্তি করে বোতামটি স্টাইল করার অনুমতি দেয়।

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

— Tschlegel
সূত্র
0

আমি এটি যুক্ত করব: ব্যাকগ্রাউন্ড চিত্রটি background-position: x y;(x অনুভূমিক y উল্লম্ব) দিয়েও স্থাপন করা যেতে পারে । (..) আমার কেস, সিএসএস:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
— জন
সূত্র
0

এইচটিএমএল কোড: 

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

সিএসএস কোড:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

আমি কিছুদিন স্কুলের পরে এইচটিএমএল পড়ছি, এবং এটি কীভাবে করা যায় তা জানতে চেয়েছিলাম। ব্যাকগ্রাউন্ডটি খুঁজে বের করুন এবং তারপরে 2 এবং 2 একসাথে রেখে দিন এটি 100% আমি পরীক্ষা করে দেখেছি, যদি আপনি প্রয়োজনীয় জিনিসগুলি পূরণ করেন তা নিশ্চিত না করে !!! আমাদের উচ্চতা নির্দিষ্ট করতে হবে, কারণ এটি ছাড়া কিছুই থাকবে না !!! আমি এই বেসিক শেলটি ছেড়ে যাব আপনি অ্যাড-অন করতে পারেন।

উদাহরণ:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

পিএস হ্যাঁ আমি লিনাক্স ব্যবহারকারী;)

— Z_Doctor
সূত্র
0

"প্রিন্ট ব্যাকগ্রাউন্ড কালার এবং ইমেজ " অক্ষম করে ব্যবহারকারী যখন নথিটি মুদ্রণ করে তখন ভিত্তিযুক্ত backgroundবা কোনও পদ্ধতি background-imageব্যর্থ হতে পারে । যা দুর্ভাগ্যক্রমে সাধারণত ব্রাউজারের ডিফল্ট।

ব্রোঙ্কস দ্বারা প্রস্তাবিত একমাত্র মুদ্রণ-বান্ধব এবং ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ পদ্ধতি।

— সাইমন রোজম্যান
সূত্র
0

আধুনিক সিএসএস বৈশিষ্ট্য ব্যবহার করে সিএসএস সংজ্ঞা থেকে আইএমজি এসসিআর লোড হচ্ছে

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
স্নিপেট প্রসারিত করুন

  • srcএকটি <আইএমজি> -এ ফাঁকা সংজ্ঞাটি অ্যানরআরর হ্যান্ডলারটি ট্রিগার করে: লোডআইএমজি ফাংশন
  • লোডআইএমজি ফাংশন সিএসএস মান গণনা করে
  • সমস্ত অবৈধ অক্ষর ফেলা
  • IMG.src সেট করে
  • সিএসএস পরিবর্তন হলে, চিত্রটি আপডেট হয় না! আপনাকে আবার লোডআইএমজি কল করতে হবে

জেএসফিডাল: https://jsfiddle.net/ কাস্টমএলমেন্টস উদাহরণসমূহ /vjfpu3a2/

সম্পর্কিত এসও উত্তর: ডাব্লুসিপিআরপিএস

— ড্যানি '365CSI' এনগেলম্যান
সূত্র
-3

শুধু এইচটিএমএল 5 ব্যবহার করুন :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
— ম্যাক্স
সূত্র
ওপি বিশেষত একটি সিএসএস সমাধান সহ তাদের এইচটিএমএল মার্কআপ পরিষ্কার করতে চাইছে। এই উত্তরটি কেবল মার্কআপটিকে আরও বিশৃঙ্খলা করবে।
— ওয়েবাহোলিক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.