ব্যবহার করে: সিএসএস সিউডো উপাদানটির আগে ইমেলে মডেল যুক্ত করতে

Question

আমার একটি সিএসএস বর্গ রয়েছে Modalযা একেবারে অবস্থানযুক্ত, এর পিতামাতার উপরে z- সূচকযুক্ত এবং জিকুয়েরির সাথে সুন্দরভাবে অবস্থিত। আমি মডেল বাক্সের শীর্ষে একটি ক্যারেট চিত্র (^) যুক্ত করতে চাই এবং এটি :beforeপরিষ্কারভাবে করার জন্য সিএসএস সিউডো নির্বাচকটি ব্যবহার করতে চাইছিলাম।

চিত্রটি একেবারে অবস্থিত এবং মডেলের উপরে z- ইনডেক্স করা প্রয়োজন, তবে contentবৈশিষ্ট্যে চিত্রটিতে উপযুক্ত বর্গ যুক্ত করার কোনও উপায় আমি পাইনি :

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

দ্বিতীয় সেরা বিকল্প- আমি কি সামগ্রীর বৈশিষ্ট্যে শৈলগুলি ইনলাইন যুক্ত করতে পারি?

Answer 1

http://caniuse.com/#search=:after

:afterএবং :beforeসঙ্গে contentহিসাবে তারা প্রতিটি বৃহত ইন্টারনেট এক্সপ্লোরার ছাড়া অন্য ব্রাউজারে অন্তত 5 সংস্করণ ফিরে সমর্থিত ব্যবহার করার ঠিক আছ। ইন্টারনেট এক্সপ্লোরার 9+ সংস্করণে সম্পূর্ণ সমর্থন এবং 8 সংস্করণে আংশিক সমর্থন রয়েছে।

এটি কি আপনি খুঁজছেন?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

যদি না হয়, আপনি কি আরও ভাল ব্যাখ্যা করতে পারেন?

অথবা আপনি jQuery ব্যবহার করতে পারেন, যেমন জোশুয়া বলেছিলেন:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

Comments

এই. ব্রাউজারের সামঞ্জস্যতা সম্পর্কে জোশুয়ার বক্তব্যটি ঠিক যদিও- আই 8 ছবিটিতে চিত্রটি সরবরাহ করে: সামগ্রীর পরে, তবে পিতামাতার সীমানার বাইরে থাকা অংশগুলি রেন্ডার করবে না।

— আরএসজি

এখন (2017 এ), আইই 11 হ'ল মাইক্রোসফ্ট দ্বারা সমর্থিত আইই এর একমাত্র সংস্করণ; সুতরাং, আইই 8 এর সামঞ্জস্যতা নিয়ে চিন্তিত হওয়ার খুব বেশি দরকার নেই। এছাড়াও, একটি সিএসএস সমাধান jQuery সমাধানের চেয়ে প্রায় সবসময়ই ভাল কারণ তারা আরও দ্রুত লোড করার ঝোঁক দেয় এবং পৃষ্ঠাটি লোড হওয়ার পরে jQuery আপনার লেআউটটি পুনরায় লিখে স্ক্রিন ঝাঁকুনির কারণ হতে পারে।

— নোসাজিমিকি

@ নোসাজিমিকি আপনার পুরানো ব্রাউজারগুলির সম্পর্কে চিন্তা করা উচিত কিনা তা বেশিরভাগ আপনার দর্শকদের উপর নির্ভর করে।

— জোসে ফাতি 23'18

Answer 2

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

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

Comments

এই পরামর্শের জন্য ধন্যবাদ - মডেলের একটি সীমানা রয়েছে তাই আমি মনে করি না যে আমি সীমানা / বিজি রঙের উপরে গাজরের চিত্রটি পজিশনের জন্য পটভূমি চিত্র ব্যবহার করতে পারি।

— আরএসজি

কেন না? যদি আপনি পুরোপুরি সেই সিডো উপাদানটি অবস্থান করে থাকেন তবে আপনি এটিকে মার্জিন দিয়ে এদিক ওদিক ঘুরিয়ে দিতে পারেন। এটি অন্যান্য উপাদানগুলির সীমানা এবং / অথবা বিজি রঙের শীর্ষে আঁকা হবে।

— জোসে ফাতি

পটভূমি চিত্রটি ডিভের সীমানার বাইরে প্রসারিত করতে পারে না?

— আরএসজি

আপনার সম্ভবত একটি সামগ্রী যুক্ত করতে হবে: ''; এটি প্রদর্শিত হবে

— উইলস্টার 15

Answer 3

1. এটি আপনার সমস্যার জন্য আমার উত্তর।

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

Comments

আমি background-size: 33px 16px; background-repeat: no-repeat;ছবি স্কেল যোগ !

— হাসে বিজার্ক

Answer 4

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

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

Comments

এটা আমাকে দুঃখিত করেছে. আমরা লক্ষ্যবস্তু ব্রাউজারগুলির একটি করুণভাবে সীমিত সেট পেয়েছি, তাই আমি সিএসএসের সাথে কী কী সম্ভব তা নিয়ে আগ্রহী।

— আরএসজি

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

— জোশুয়া

ব্রাউজারগুলিতে অবিশ্বাস্য সমর্থন থাকা সম্পর্কে এই উত্তরটি ভুল। Contentএবং after/beforeপ্রতিটি বড় ব্রাউজার জুড়ে এটি খুব নির্ভরযোগ্য, এটি IE8, কমপক্ষে FF3.5, কমপক্ষে Chrome 9, কমপক্ষে অপেরা 10.6, কমপক্ষে সাফারি 3.2, আইওএস সাফারি প্রতিটি সংস্করণ, অপেরা মিনি প্রতিটি সংস্করণ, প্রতিটি সংস্করণ থেকে কাজ করেছে অপেরা মোবাইল এবং অ্যান্ড্রয়েড ব্রাউজারের সর্বদা সংস্করণ। যদি আপনি জানতে চান যে কোনও কিছু ক্রস ব্রাউজার সমর্থন করে কিনা, তাহলে চেক আউট করুন: caniuse.com/#search=

— android.nick

ইন্টারনেট বলে যে এটি এটি, এর অর্থ এটি সত্য নয়। তাদের সাথে কাজ করুন, তারা প্রতিটি ব্রাউজারে আলাদাভাবে কাজ করে। এবং আই 7 এখনও একটি খুব জনপ্রিয় ব্রাউজার, যা তাদের কোনওটিকে সমর্থন করে না।

— জোশুয়া

আসলে, আপনার সাথে ভাল বন্ধ CSSউপর JavaScriptএই এক। ব্রাউজারটি কতটা রক্তপাতের প্রান্তই নয়, ব্যবহারকারী এখনও JavaScriptঅক্ষম করতে পারে ... ভাগ্যক্রমে এই ক্ষেত্রে :beforeএবং :afterনির্বাচকরা ব্যাপকভাবে সমর্থিত; quirksmode.org/css/selectors

— স্টিভ বুজনা