Demo
A: Bild mit <img> Tag
B: Bild mit Pseudoelement ::before
Markup
Wie ihr sehen könnt, ist Bild A klickbar und lässt sich mit C/P kopieren, Bild B dagegen nicht. Im Markup ist der Unterschied sofort zu sehen:Markup Bild A
<div class="separator" style="clear: both; text-align: center;"> <a imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="http://goo.gl/GMMFz" /></a></div>
Markup Bild B
<div class="grid"><div class="a1"></div></div>
Erklärung
Bild B besitzt keine
<img>
Tag, sondern ist ein ganz normaler <div>
Container mit jeweils einer eigenen Klasse. Diese braucht ihr, damit ihr später jedem Container das dazugehörige Pseudoelement zuordnen könnt. Diese Zuordnung geschieht mit einer Style-Anweisung, die ihr im HTML-Modus des Editors oben in den Blogpost setzen könnt.<style> .grid .a1::before {content:url("http://goo.gl/GMMFz")} </style>Und damit das Bild in die Mitte kommt, habe ich noch einen Style-Anweisung mehr geschrieben:
<style> .grid { width: 100%; text-align: center; } .grid .a1::before {content:url("http://goo.gl/GMMFz")} </style>That's all. So simple, so far.