per CSS Transparente Grafik über Bild legen

Poseidon1987 · 24.02.2012

Hallo,
vorweg, ich weiß dass es ziemlich unsinnig ist Bilder im Internet schützen zu wollen und dass man bei "meiner" Version durch "im Quellcode suchen" den passenden Link findet..

Trotzdem würde ich gerne eine transparente Grafik über jedes Bild drüberlegen.. (damit der beim Bild speichern dann eine falsche Grafik gespeichert wird)

In der html Seite sind die Bilder in einer Tabelle in der Art eingebunden:

<table id="tabpic" border="0">
<tr>
<td><img src="img/pic/01.jpg"</td>
<td><img src="img/pic/02.jpg"></td>
<td><img src="img/pic/03.jpg"></td>
</tr>
</table>

gibe es eine möglichkeit per CSS das ganze zu automatisieren? Also ich gebe im css an dass auf jedes Bild die Grafik xyz.gif draufgelegt werden soll? Oder muss ich das per hand mit jedem Bild einzeln machen?

Viele Grüße,
Michael

HaeF · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Sinn macht eigentlich nur, per style das eigentliche Bild als Hintergrund zu definieren und die transparente Grafik als Image drüber zu legen. Dazu genügen ein paar transparente Pixel, die per Größenangabe aufgeblasen werden.
Das müsste für jedes Bild einzeln gemacht werden, es sei denn, man verfügt über entsprechende Kenntnisse zum Bleistift in PHP.
Bei den wechselnden Bildern auf der Startseite von www.baurfoto.de ist das (wegen des Zufalls-Bildwechsels) so realisiert.
Der von Dir gewünschte Effekt, dass das Bild mit Rechtsklick nicht gespeichert werden kann, ist in diesem Fall ein Nebeneffekt.
Übrigens:
Tabellen-Layout ist bääähh!
FG
HaeF

Davi2000 · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Ich würde mir die Mühe machen mit einem Grafikprogramm extern das Wasserzeichen zu machen, alles andere ist meiner Meinung nach immer irgendwie auszutricksen.

Außerdem, nimm statt Tabellen, Listen. Pack jedes Bild in ein <li> und style es dann.

HansHansa · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HaeF schrieb:
Bei den wechselnden Bildern auf der Startseite von ist das (wegen des Zufalls-Bildwechsels) so realisiert.

Was soll dort nicht gehen?

Aufwand + Irgendwas Erfolg= 0

J000S · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Wie HaeF schon schrieb... mach ein Transparentes png mit 5x5px oder so und streck das auf die Größe des zu schützenden Bildes.

owieortho · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Poseidon1987 schrieb:
... ziemlich unsinnig ...

nicht nur ziemlich, sondern gänzlich ...

Poseidon1987 schrieb:
... durch "im Quellcode suchen" den passenden Link findet.

Den Direktzugriff könntest Du ja dann über z.B. htaccess blockieren, aber meine Screenshots, meine temporären Internetdateien, mein Webseiten speichern, mein ...

Die einzige sichere Lösung (ist noch aus dem letzten Jahrtausend):
Dein Werk/Bild auf einen Datenträger Deiner Wahl speichern
Alle Kopien schreddern
Den Datenträger im Garten vergraben ... sicher

Also, wenn Du es weisst, warum machst Du es dann trotzdem?

HaeF · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HansHansa schrieb:
Was soll dort nicht gehen?

Aufwand + Irgendwas Erfolg= 0

Richtig Lesen + Verstehen = hilft weiter.
Es ging um die Bilder auf der Startseite.

Wer nachts nicht denken kann sollte diese im Bett verbringen.

Mackymesser111 · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HaeF schrieb:
Richtig Lesen + Verstehen = hilft weiter.
Es ging um die Bilder auf der Startseite.

Wer nachts nicht denken kann sollte diese im Bett verbringen.

hmm…
Troll? oder einfach keine Ahnung?
egal, dieser Ton muss einfach nicht sein…

Geht bei den Bilder mit der selben Methode wie oben gezeigt -><-

sonst einfach die abgreifen (zahl in der url muss verändert werden)

HaeF · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Mackymesser111 schrieb:
hmm…
Troll? oder einfach keine Ahnung?
egal, dieser Ton muss einfach nicht sein…

Geht bei den Bilder mit der selben Methode wie oben gezeigt -><-

sonst einfach die abgreifen (zahl in der url muss verändert werden)

Es ging um ein Beispiel, wie man per CSS Bilder in den Hintergrund legt.
In meiner Antwort habe ich erklärt, warum ich das mache.
Das dann mit "Aufwand + Irgendwas Erfolg= 0" und Zitat einer anderen Stelle abzuqualifizieren ist auch nicht besonders freundlich.
Dass man Bilder immer "abgreifen" kann, ist mir bekannt.
Dazu muss man nicht extraschlau sein.

HansHansa · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HaeF schrieb:
Es ging um die Bilder auf der Startseite.
.

Geht genauso gut bei mir und rechte Maustaste geht auch.
Damit kommt man zur Hintergrundgrafik und fertig ist man.

Lona · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Ich schütze meine Bilder mit meinem Wasserzeichen es geht ganz leicht

Mackymesser111 · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HaeF schrieb:
Dass man Bilder immer "abgreifen" kann, ist mir bekannt.

Genau das macht die oben erklärte Methode ja so sinnlos.

Ich binde die Bilder z.B. per lightbox ein und verpass den höheraufgelösten einfach ein Wasserzeichen.
Hängt mit der zielgruppe zusammen: Wenn jemand tatsächlich meine Arbeit glaubhaft als seine ausgeben will, muss er über bestimmte computerskills verfügen, und ist dann auch ziemlich sich so fähig ein hintergrundbild abzuspeichern.
Und die die das nicht können können immerhin einen sreenshot machen.

Ich halte es einfach für nicht so sinnig jemand eine Methode zu erklären die heute einfach nicht mehr klappt, auch wenn er ausdrücklich danach gefragt hat.

ALSO: Weniger zeit in ************(hier stand mal K00pierschutz) aufwenden und mehr selber gestalten. Die zeit ist besser genutzt. und wenn jemand deine Arbeit klauen möchte: lass ihn doch wenn er sowas nötig hat…

cebito · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

HaeF schrieb:
Wer nachts nicht denken kann sollte diese im Bett verbringen.

Seh ich auch so, leg dich schlafen :muede: oder anders - der Ton macht die Musik.

Zum Thema, das man Bilder nicht 100% schützen kann ist hinlänglich bekannt. Was gegen das Kontextmenü hilft, vorausgesetzt das Bild ist nicht als Hintergrundbild eingebunden sondern befindet sich in der HTML als img und hat per CSS eine Höhe, Breite und ein position (relative oder absolute) ist dies:

Code:

.bild:after{content:'';width:100%;height:100%;top:0;left:0;display:block;position:absolute;}

Damit wird ein transparenter Block erzeugt, der sich komplett über das Bild legt.

Wie gesagt schützt das nur gegen eh unbedarfte User und hilft auch nicht bei älteren IE-Versionen, da die diese Pseudoelemente nicht kennen.

DarkFather · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Wenn ein Bild eh schon als Hintergrund eingebettet ist braucht man doch kein transparentes Bild mehr drüberlegen, das Kontextmenü ist ohnehin schon ausgeschlossen.

Bindet man möglichst viele undurchsichtige Stylesheets ein wird so mancher die Suche aufgeben, wers trotzdem will bekommts auch.

MfG
Dark

cebito · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

DarkFather schrieb:
...das Kontextmenü ist ohnehin schon ausgeschlossen.

Na dann :uhm:

DarkFather · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

OK, ich hatte es nur in Opera getestet, IE und FF haben tatsächlich diese Funktion.
Schande über mich

Regenheizer · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Also, wenn ich nicht möchte, daß jemand meine Bilder von meiner Website weiter verwendet, lege ich einfach in Transparenz meine URL-Adresse drauf.
Hier kann man sehen wie ich das gelöst habe:

cebito · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Regenheizer schrieb:
Also, wenn ich nicht möchte, daß jemand meine Bilder von meiner Website weiter verwendet, lege ich einfach in Transparenz meine URL-Adresse drauf.
Hier kann man sehen wie ich das gelöst habe:

Darum gehts aber hier nicht, und - wenn ich Bilder "schön" präsentieren möchte, sind so riesen-Wasserzeichen echt förderlich. Das sind die Bilder, die ich mir am liebsten anschaue

Mal Hand aufs Herz, wenn schon Wasserzeichen, dann doch an einer Stelle, an der es nicht die Betrachtung des Bildes stört. Das könnte z.B. eine Stelle sein, die, wenn man sie wegschneidet die Wirkung des Bildes kaputt macht. Aber das hat jetzt nix mehr mit dem Webbereich zu tun...

Cosmoflamme · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Mich persönlich stört das halt ein bisschen beim Betrachten der Bilder.Vor allem wenn der Schriftzug dann noch so gross ausgefallen ist,wie bei Dir.
Das mag ganz sicher gegen den Bilderklau helfen,aber Du lässt leider die "ganz normalen" (in Anführungszeichen) Webseitenbesucher dabei aussen vor.

Regenheizer · 25.02.2012

AW: per CSS Transparente Grafik über Bild legen

Cosmoflamme schrieb:
Mich persönlich stört das halt ein bisschen beim Betrachten der Bilder.Vor allem wenn der Schriftzug dann noch so gross ausgefallen ist,wie bei Dir.
Das mag ganz sicher gegen den Bilderklau helfen,aber Du lässt leider die "ganz normalen" (in Anführungszeichen) Webseitenbesucher dabei aussen vor.

Ob das den Betrachter so sehr stört kann man ja nur erfahren, wenn man ein Feedback bekommt. Da ich die Darstellung der Bilder nochmal ändern will, werde ich mir vielleicht was Anderes einfallen lassen. So 200%ig sicher war ich mir bei der Aktion nämlich auch nicht. Ich hab's halt erstmal so gemacht und dann schaun wir mal. Vielleicht fällt mir ja was dezenteres ein.