Website: kann man mehrere Grafiken "übereinander" legen?

[timo82]

Hi,

vorab: ich frage für einen Freund, habe damit selber nichts am Hut.

Ist es möglich, auf einer Website (die mit Wordpress erstellt/bearbeitet wird), statt einem Bild auch mehrere Bilder (mit der gleichen Größe) an derselben Position zu überlagern?

Der Hintergrund ist, dass auf der Website täglich neue/geänderte Bilder eingebunden werden sollen und der Freund keine (wirklich keine) Ahnung von Grafikerstellung hat.


Er war gestern genervt davon, dass ständig neue Ideen auf den Tisch kommen und er keine Ahnung hat, wie das mit diesen neuen Grafiken funktionieren soll.

Die Grafiken sind eigentlich einfach aufgebaut:
1: (hinterste Ebene) Ein individuelles Bild
2: (mittlere Ebene) Ein farbiger Rahmen, je nach "Hauptfarbe" des Bildes (1)
3: (vorderste Ebene) Ein Kurztext, was sich hinter dem Bild versteckt.

Also z.B. ein Bild von einer Banane, Rahmen gelb, Kurztext: "Obst".

Meine Idee war jetzt, mit Photoshop eine Stapelverarbeitung zu machen:
1. Aus einer Bilddatei (das individuelle Bild mit einem fixen Namen) eine neue Datei (1.jpg) mit den richtigen Maßen erzeugen und speichern
2. Aus der Bilddatei die Hauptfarbe ermitteln und den Rahmen (Innenteil transparent) mit den richtigen Maßen erzeugen (2.png) und speichern
3. Die Bilddatei mit Text öffnen lassen und dann (Ende Stapelverarbeitung) den Text manuell eintippen und mit transparentem Hintergrund als 3.png abspeichern.

Die Dateien 1.jpg, 2.png und 3.png müsste man dann täglich auf den Server laden und hätte jeweils ein aktuelles Bild...


Ich weiß, dass das viel Arbeit ist und ich möchte auch nicht über den Sinn diskutieren.
Ich würde die Datei komplett mit Photoshop erstellen, bin aber sicher, dass das bei en Leuten der Firma nicht klappt bzw. dass ich die jeden Tag am Telefon habe.


PS: ich mache beruflich was ganz anderes.

 

[Amaoto]

Ja, mit position in CSS lassen sich Elemente genau platzieren:
https://www.w3schools.com/css/css_positioning.asp

Beispiel: http://www.corelangs.com/css/box/ontop.html

 

[Toms]

in css:

.myElementClass{
    position: absolute;
    top: xx;
    left: xx;
}

Und dann über top, bottom, left, right kannste pixelgenau positionieren

 

[timo82]

Hi,
danke euch sehr. Das müsste ja dann einmalig zu machen sein und (wenn sich die Dateigrößen in Pixeln) nicht ändert, wäre das recht einfach zu handlen.

 

[Toms]

Die angezeigte größe kannst du einfach über das image-tag festlegen

<img id="meinBild1" src="./pfad/zum/bild"/>

#meinBild1{
    width: xx px;
    height: xx px;
}

 

[timo82]

Danke. Das ist ja noch einfacher!!!

 

[sidewinderpeter]

https://wiki.selfhtml.org/ et al. hilft. Natürlich solltest Du bedenken, dass die Grafiken ggf. auch entsprechend transparent gemacht werden müssen. Entweder z.B. als png bereits transparent mit Photoshop(o.ä.) anlegen oder
z.B. über CSS das Element transparent machen und wie oben positionieren.
background-color: #fff;
color: #000;
filter:alpha(opacity=70); /* IE */
opacity:0.7; /* allgemein */
-moz-opacity:0.7; /* Mozilla */
-khtml-opacity:0.7; /* KTHML */
-opera-opacity:0.7; /* Opera */