mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:36 Benutzername: Passwort: Auto-Login

Thema: Html-Problem: Bild mit unbestimmten Größe maskieren vom 24.01.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Html-Problem: Bild mit unbestimmten Größe maskieren
Seite: 1, 2  Weiter
Autor Nachricht
stolat
Threadersteller

Dabei seit: 20.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 24.01.2013 11:00
Titel

Html-Problem: Bild mit unbestimmten Größe maskieren

Antworten mit Zitat Zum Seitenanfang

Hallo,

kann mir vielleicht jemand dabei helfen, wie ich ein Bild mit unbestimmten Größe mit einem anderem, teilstransparen Bild überlagere, so dass das obere Bild immer so weit sichtbar ist, dass es grade das untere überdeckt?

Beispiel:
Ich lasse rechts-oben auf einer Website Gesichter in unterschiedlicher Größe erscheinen, darüber lege ich immer ein halbtransparentes PNG-Bild mit unterschiedlichen Symbolen , so das das untere Bild von dem Muster überlagert wird. Ich habe es mit einet Tabelle geschafft, die das Gesicht als Hintergrund anzeigt und das PNG-Muster, einfach als ein Element der Tabelle eingesetzt, deckt schön das Gesicht ab. Leider entscheidet jetzt die Größe des PNG-Bilds, wie gross die Tabelle wird und damit wieviel von dem Gesicht sichtbar ist. Ich möchte es umgekehrt machen, also Gesicht immer ganz sichtbar und das Muster einfach rechts und unten abschneiden, wo das Gesicht endet, aber trotzdem das PNG ÜBER dem Gesicht lassen. Nichts braucht skaliert zu werden, das Muster ist da universell.

Gibt es dafür einen einfachen Weg, ohne per Script die Bildgröße auslesen zu müssen?

Gruss
Sto
  View user's profile Private Nachricht senden
qualidat

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Do 24.01.2013 11:05
Titel

Antworten mit Zitat Zum Seitenanfang

serverseitig, per PHP?

- Größe von Bild unten abfragen
- transparenten DIV erstellen und DIV und Bild oben gemäß Abfrage positionieren und skalieren (CSS)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
stolat
Threadersteller

Dabei seit: 20.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 24.01.2013 11:13
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, als Notlösung ja, aber ich habe auf eine saubere html/css-Methode gehofft.

Zuletzt bearbeitet von stolat am Do 24.01.2013 11:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 24.01.2013 11:13
Titel

Antworten mit Zitat Zum Seitenanfang

Die semantisch brauchbarste Variante wäre via CSS3

http://www.css3.info/preview/multiple-backgrounds/

Ich weiß nicht, ob es vernünftigen Polyfill-Support dafür gibt. Müsste man mal Googlen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 24.01.2013 11:21
Titel

Antworten mit Zitat Zum Seitenanfang

CSS-Methode? Durchaus machbar..

Gruß
Karl
  View user's profile Private Nachricht senden
stolat
Threadersteller

Dabei seit: 20.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 24.01.2013 11:35
Titel

Antworten mit Zitat Zum Seitenanfang

@ChrisKam und @Karlarsch
wie löse ich das mit der variablen Größe? Ich habe es vorhin einfach geschafft, indem das Foto, als Tabellenelement, die Größe der Tabelle bestimmte. Aber als Hintergrund eines Div's bestimmt es doch die Größe des Div's nicht, oder?
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Do 24.01.2013 11:43
Titel

Antworten mit Zitat Zum Seitenanfang

Zeig das mal konkret in Deinem Code bitte, sonst wird das hier sehr schwierig. Ich befürchte mit Tabellen hat Dein Problem nämlich nichts zu tun *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 24.01.2013 11:44
Titel

Antworten mit Zitat Zum Seitenanfang

Da ich kein Bild hatte, habe ich die Größe des <img> im CSS deklariert. Ändere die Größenangabe und schau was passiert. So wird es sich auch bei richtigen Bildern unterschiedlicher Größe verhalten.

Gruß
Karl
  View user's profile Private Nachricht senden
 
Ähnliche Themen [HTML] DIV-Tag - Größe festlegen
Größe einer HTML-Datei
flash gallery in html, variable größe!
ImageMap, Iframe, Größe HTML, ImageReady und Frontpage
Background Bild Größe ?
HTML/CSS Problem mit <html><body> komischer Abstand unten
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.