না: আগে img উপাদানগুলিতে কাজ না করা?

Question

আমি :beforeঅন্য চিত্রের উপর একটি চিত্র স্থাপনের জন্য নির্বাচককে ব্যবহার করার চেষ্টা করছি , তবে আমি খুঁজেছি যে এটি কোনও imgউপাদানটির আগে কোনও চিত্র স্থাপন করার জন্য কেবল কোনও কার্যকর উপাদান ব্যবহার করে না some বিশেষত, আমার শৈলীগুলি হ'ল:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

এবং আমি দেখতে পাচ্ছি যে এটি ভাল কাজ করে:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

তবে এটি করে না:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

আমি এর পরিবর্তে একটি divবা pউপাদান ব্যবহার করতে পারি spanএবং ব্রাউজারটি সঠিকভাবে imgউপাদানটিতে থাকা চিত্রটির উপরে আমার চিত্রটি ওভারলে করে , তবে আমি যদি ওভারলে ক্লাসটি imgনিজেই প্রয়োগ করি তবে এটি কার্যকর হয় না।

আমি এই কাজটি করতে চাই কারণ এটি অতিরিক্ত spanআমাকে আপত্তিজনক করে তোলে, তবে আরও গুরুত্বপূর্ণ, আমি প্রায় 100 টি ব্লগ পোস্ট পেয়েছি যা আমি সংশোধন করতে চাই এবং আমি যদি কেবল স্টাইলশিটটি সংশোধন করতে পারি তবে আমি একযোগে এটি করতে পারি, তবে যদি আমাকে ফিরে যেতে হবে এবং spanউপাদান aএবং imgউপাদানগুলির মধ্যে একটি অতিরিক্ত উপাদান যুক্ত করতে হয় তবে এটি আরও অনেক বেশি কাজ হবে।

Comments

এটি অদ্ভুত, বিশেষত যেহেতু সিএসএস স্ট্যান্ডার্ড নিজেই ব্যবহারের একটি উদাহরণ দেয়: এর আগে একটি আইএমজি উপাদান দিয়ে ...

সিএসএসের

— ছারভে

@ ছারভে: এই প্রশ্নটির পরে এই প্রশ্ন করা হয়েছিল?

— জোশুয়া ফ্র্যাঙ্ক

Answer 1

দুর্ভাগ্যক্রমে, বেশিরভাগ ব্রাউজারগুলি img ট্যাগ ব্যবহার করে :afterবা সমর্থন করে না :before।

http://lildude.co.uk/after-css-property-for-img-tag

তবে জাভাস্ক্রিপ্ট / জিকুয়েরির সাথে আপনার যা প্রয়োজন তা পূরণ করা আপনার পক্ষে সম্ভব। এই ঝাঁকুনিটি দেখুন:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

সম্পাদনা করুন :

এটি সমর্থিত না হওয়ার কারণে, কোরআরওয়ার্ডের উত্তরটি দেখুন ।

Comments

আপনার ফিডাল অনুপস্থিত এটি জেফিডাল লিঙ্কগুলির সৌন্দর্য।

— রোকো সি বুলজান

ঠিক কর. এর জন্যে দুঃখিত.

— cwharris

এই উত্তরটি কেন ইমগ আগে বা পরে থাকতে পারে না তা ব্যাখ্যা করে না। এছাড়াও, প্রস্তাবিত জাভাস্ক্রিপ্ট সমাধান এর জন্য উপযুক্ত প্রতিস্থাপন নয়।

— জ্যাস্পার কেনিস

প্রস্তাবিত সমাধানটি প্রতিটি দৃশ্যে কাজ করবে বলে আশা করা যায় না। এটি সহজেই উদাহরণস্বরূপ যে কেউ কীভাবে সমস্যাটিকে আটকায়। আপনি যদি আরও সাধারণ সমাধান প্রস্তাব করতে চান তবে একটি উত্তর পোস্ট করতে দ্বিধা বোধ করবেন।

— সিওহারিস

Answer 2

সিউডো-বাছাইকারীদের পূর্বের এবং তার পরে এইচটিএমএল উপাদানগুলি sertোকানো হয় না - তারা লক্ষ্যযুক্ত উপাদানটির বিদ্যমান সামগ্রীর আগে বা পরে পাঠ্য সন্নিবেশ করে। কারণ চিত্রের উপাদানগুলিতে পাঠ্য থাকে না img:beforeবা img:afterতার বংশধর থাকে না, না হয় আপনি কোনও ভাল করবেন না। এই মত উপাদানের ক্ষেত্রে দেখা যায় <br>এবং <hr>একই কারণে।

Comments

ইমাগুলি ট্যাগগুলি স্পষ্টতই তাদের মধ্যে এবং এর মধ্যে উপাদান রয়েছে এবং তবুও আমাদের এগুলি অন্য উপাদানগুলির আগে বা পরে: স্যুয়েডো-সিলেক্টর ব্যবহার করার পরে inোকানোর অনুমতি দেওয়া হয়। এটি কি সিএসএস স্পকে নেই?

— সিওহারিস

সেটা কিছুটা আলাদা। আপনি একটি চিত্র সন্নিবেশ করতে পারেন, তবে কোনও চিত্র ট্যাগ ব্যবহার করছেন না - আপনাকে content: url(/img/foo.jpg);সিনট্যাক্সটি ব্যবহার করতে হবে । বিশদ জানতে w3.org/TR/CSS21/generate.html দেখুন ।

— কোরিয়ার্ড

ছোট সংশোধন: তারা psuedo- উপাদানগুলি সন্নিবেশ করে, যা পাঠ্য নোডের মতো উপাদানগুলির মতো বেশি।

— ক্রিস কলো

উত্পন্ন সামগ্রী শ্যাডো ডিওমের অংশে পরিণত হয়। এই নতুন উপাদান, বৈশিষ্ট্য এবং পাঠ্য নোডগুলি খুব আসল। আপনি এগুলি দেখতে পারেন যেমন Chrome এর পরিদর্শক।

— মার্ক ডিয়েথেল

@ চল্লিশ বছর সম্ভবত আপনি এমডিএন (প্রতিস্থাপন উপাদান)

— মার্ক ডিয়েথেল

Answer 3

খাঁটি CSS এ এই কাজটি করার একটি উপায় খুঁজে পেয়েছি:

আমি শুধু জাল বিষয়বস্তু আছি -method

img সক্ষম করার জন্য একটি খাঁটি সিএসএস পদ্ধতি: পরে।

আপনি কোডপেনটি পরীক্ষা করে দেখতে পারেন : আমি কেবল নকল সামগ্রী বা উত্সটি দেখতে পাচ্ছি ।

উত্স এবং স্নিপেট

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

ব্রাউজার সমর্থন

✓ ক্রোম 10+

✓ ফায়ারফক্স 11+

✓ অপেরা 9.8+

✓ সাফারি

কোন সহযোগিতা নেই

Explorer ইন্টারনেট এক্সপ্লোরার 8/9

অন্যান্য ব্রাউজারে পরীক্ষা করুন

Comments

সুতরাং মূলত আপনি কেবল বিষয়বস্তু যুক্ত করুন: "" img ট্যাগের স্টাইলে এবং: কাজ শুরু করার আগে এবং: পরে। ভাল লাগছে, আমি ক্রস ব্রাউজারটি কেমন তা ভাবছি।

— w00t

আমি jsbin.com/esewow/edit#html,live একটি আইকন পরীক্ষা সেট আপ করেছি এবং আমি নিশ্চিত করতে পারি যে এটি IE8 এ কাজ করে না তবে ক্রোম এবং সাফারিতে এটি ঠিক আছে।

— w00t

কোডপেন উদাহরণটি কেবল ফায়ারফক্সে কাজ করে যদি ইমগ ট্যাগের এসসিআরটি অবৈধ হয় - যার ফলে Alt বৈশিষ্ট্যটিকে এমন উপাদান হিসাবে রেন্ডার করা হয় যা আসলে দেয়: আগে এবং: পরে allows যদি img src উপস্থিত থাকে তবে এটি কাজ করা বন্ধ করে দেয়: codepen.io/anon/pen/EjtDu

— thenickdude

আমি ভুল হলে আমাকে থামান, তবে মনে হয় এটি আর Chrome এর সাথে আর কাজ করে না

— Gyum Fox

img: আগে এবং img: পরে সাফারি তে মোটেও কাজ করবেন না । এমনকি এটি নয়, যা প্রাথমিকভাবে আমাকে উত্তেজিত করেছিল। ভাল চেষ্টা যদিও।

— ওয়াই বোলিং

Answer 4

প্রতিস্থাপিত উপাদান<img> হওয়ার প্রকৃতির কারণে ডকুমেন্ট স্টাইলিং এটি প্রভাবিত করে না।

এটিকে যাইহোক রেফারেন্স করতে, <picture>একটি আদর্শ, নেটিভ র‍্যাপার সরবরাহ করে যা এর সাথে সিউডো-উপাদান যুক্ত থাকতে পারে:

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

Answer 5

:hover::afterপ্রভাব অর্জনের জন্য ইমগের জন্য ডিভ ধারক ব্যবহার করে এখানে আরও একটি সমাধান দেওয়া হয়েছে's

এইচটিএমএল নীচে:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

সিএসএস নীচে:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

এটি কার্যকরভাবে দেখতে, আমি তৈরি করা ফলকটি পরীক্ষা করে দেখুন ঠিক তাই আপনি জানেন যে এটি ক্রস ব্রাউজার বান্ধব এবং 'জাল সামগ্রী' দিয়ে কোডটি চালানোর দরকার নেই।

Comments

এটি প্রয়োগ display: inline-blockকরতে সহায়ক #img_container। এটি পর্দার আকারের সমস্ত পর্দার আকারে চিত্রের সমান করবে। সুতরাং, আপনি :afterচিত্রের বাইরে ভাসমান সামগ্রী শেষ করবেন না ।

— বেনামে

Answer 6

আমি মনে করি এটি কেন কাজ করে না তা দেখার সর্বোত্তম উপায়টি হ'ল: আপনি যে ট্যাগটি প্রয়োগ করছেন সেটির আগে বা পরে তাদের বিষয়বস্তু সন্নিবেশ করানোর আগে এবং: সুতরাং এটি ডিভস বা স্প্যানগুলির সাথে কাজ করে (বা বেশিরভাগ অন্যান্য ট্যাগ) কারণ আপনি তাদের ভিতরে সামগ্রী রাখতে পারেন।

<div>
:before
Content
:after
</div>

তবে, একটি ইম্জি একটি স্ব-অন্তর্ভুক্ত, স্ব-সমাপনী ট্যাগ এবং এটির কোনও পৃথক সমাপনী ট্যাগ নেই, আপনি এটির অভ্যন্তরে কিছুই রাখতে পারবেন না। (এটির মতো দেখতে দরকার <img>Content</img>, তবে এটি কার্যকর হয় না))

আমি জানি এটি একটি পুরানো বিষয়, তবে এটি গুগলে প্রথমে পপ আপ হয়, তাই আশা করি এটি অন্যদের শিখতে সহায়তা করবে।

Answer 7

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

এইচটিএমএল

<ul>
    <li> name here </li>
</ul>

সিএসএস

ul li::before {
    content: url(../images/check.png);
}

Answer 8

:: এর পূর্বে এবং :: পরে তৈরি সিউডো-উপাদানগুলি উপাদানটির বিন্যাস বাক্স দ্বারা অন্তর্ভুক্ত থাকে এবং তাই ইমগের মতো প্রতিস্থাপিত উপাদানগুলিতে প্রয়োগ করা হয় না, বা এলআর উপাদানগুলিতে প্রয়োগ হয় না।

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Answer 9

::after কোনও চিত্রের ফ্যালব্যাক চিত্র প্রদর্শন করতে ব্যবহৃত হতে পারে

---

নীচের উদাহরণটি দেখুন, প্রথম 2 টি imgট্যাগ ভাঙা ইউআরএলগুলিকে নির্দেশ করছে। তবে দ্বিতীয়টি ব্রাউজার থেকে ডিফল্ট ভাঙা লোগোর পরিবর্তে ফ্যালব্যাক চিত্র প্রদর্শন করে। তবে, আমি নিশ্চিত নই যে এটি কোনও ব্যবহারিক, এটি সঠিকভাবে কাজ করা আমার কাছে এ জাতীয় কৌশল বলে মনে হয়।

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

Answer 10

এই কোড ব্যবহার করে দেখুন

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

Answer 11

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

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

আমি যা করেছি তা ছিল <p>আমার ইমেজ ট্যাগের পরে একটি খালি ট্যাগ। এখন আমি ছবিটি প্রদর্শন করতে এবং আমার প্রয়োজন অনুসারে এটি অবস্থানের জন্য পি :: ব্যবহার করব। এখানে সিএসএস:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

চেষ্টা করে দেখুন

Answer 12

আগের উপাদানটির পরে :: চেষ্টা করুন ।

Comments

আপনি কি আপনার পোস্টটি বিস্তারিত বর্ণনা করবেন?

— zmag