XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Image in <div> mit Transparenzverlauf überlagern (http://xhtmlforum.de/showthread.php?t=72223)

Vagabond97 29.07.2015 16:44

Image in <div> mit Transparenzverlauf überlagern
 
Hallo,

ich habe folgendes vor: in einem Header möchte ich ein <img> Element mit einem Transparenzverlauf der als linear-gradient background eines <div> Elementes definiert wurde vollständig überlagern. Den grundsätzlichen Aufbau könnt ihr unten ersehen. Das Problem was ich dabei habe: das <div> mit der ID gradient hat leider immer eine Höhe von 0px. Wie kann ich es automatisch die Höhe vom img annehmen lassen? Oder gibt es eine andere Lösung?
Ein Hinweis noch: Ich habe eine Lösung gesehen, bei der im Background zunächst per URL das Hintergrundbild definiert wird (steht weiter rechts in der Definitionszeile) und danach dann per linear-gradient der Verlauf drüber gelegt wird (steht weiter links in der background Zeile, die ja von rechts nach links abgearbeitet wird). Diese Lösung kann ich allerdings nicht anwenden, da die img Zeile dynamisch von einem Joomla Modul erzeugt wird (die Bild Datei ändert sich abhängig von der gerade offenen Seite).

Ich hoffe, dass mir einer weiter helfen kann. Ich vermute, dass ich wahrscheinlich nur eine Kleinigkeit übersehen habe. Vielleicht gibt es auch einen anderen Weg, der noch simpler ist, den ich aber noch nicht gefunden habe.

Hier der HTML Rahmen:
HTML-Code:

<div class"row-fluid">
  <div class="span12">
      <div class="span5" id="fav-logo">
            "Content of span5"
            </div>
            <div class="span7" id="fav-logo">
            <div class="moduletable">
                <img />
            </div>
            <div id="gradient"/>
      </div>
  </div>
</div>

Hier der CSS Code (unterschiedliche Farbverläufe bei den linear-gradients ignorieren):
HTML-Code:

.row-fluid {
float: left;
display: block;
min-height: 30px;
box-sizing: border-box;
}

.span12 {
width: 100%;
}

.span5 {
width: 40.17%;
}

.span7 {
width: 57.26%;
}

.moduletable {
left: 0px;
top: 0px;
position: relative;
z-index: 2;
}

#gradient {
width: 100%;
height: 100%;
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(92,134,196,1) 0%,rgba(92,134,196,0.5) 30%,rgba(92,134,196,0.5) 70%,rgba(92,134,196,1) 100%); /* W3C */
position: relative;
left: 0px;
top: 0px;
z-index: 3;
}


Thielo 29.07.2015 17:15

1) ein Div darf nicht selbstschließend sein. Es muss also </div> geschlossen werden
2) setz die Verlaufsebene auf position: absolut; positioniere sie top: 0; left: 0;
und dann noch height: 100%; width: 100%;
Damit liegt diese Ebene über der anderen. (Bitte noch beachten das das Eltern Element position: relative; haben sollte.)

MrMurphy 29.07.2015 18:01

Hallo

Zitat:

Diese Lösung kann ich allerdings nicht anwenden, da die img Zeile dynamisch von einem Joomla Modul erzeugt wird (die Bild Datei ändert sich abhängig von der gerade offenen Seite).
Es ist immer problematisch wenn der Quellcode nicht frei gestaltet werden kann.

Ich habe erst mal versucht eine Lösung unabhängig

a) von der Bildgröße zu erstellen und

b) so dass der Verlauf nur das Bild überdeckt und

c) unabhängig von deinen Vorgaben zu erstellen.

Mir geht es erst mal darum herauszufinden, ob die Lösung überhaupt deinen Vorstellungen entspricht:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Verlauf über Bild 01</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Um alte IE HTML5-tauglich zu machen -->
  <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
  <style>
  @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
        display: block;
      }
      * {
        box-sizing: border-box;
      }
      html {
        font-size: 120%;
      }
      body {
        padding: 0;
      }
      header {
        display: block;
        padding: 0;
        border: 3px solid red;
      }
      section {
        display: inline-block;
        position: relative;
        max-width: 100%;
        padding: 0;
        border: 3px solid black;
        margin: 0;
      }
      figure {
        display: inline-block;
        max-width: 100%;
        padding: 0;
        border: 3px solid blue;
        margin: 0;
      }
      img {
        display: block;
        max-width: 100%;
        padding: 0;
        margin: 0;
      }
      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid green;
      }
      div {
        background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(92,134,196,1) 0%,rgba(92,134,196,0.5) 30%,rgba(92,134,196,0.5) 70%,rgba(92,134,196,1) 100%); /* W3C */
        }
  }
  </style>
</head>
<body>
  <header>
      <section>
        <figure>
            <img src="http://images.fotocommunity.de/bilder/landschaft/wald/ein-morgen-im-wald-18247546-82ad-4b73-a700-8e8bb74fb471.jpg" alt="Wald">
        </figure>
        <div></div>
      </section>
  </header>
</body>
</html>

Gruss

MrMurphy

Vagabond97 30.07.2015 13:30

Hallo Thielo und MrMurphy,

vielen Dank zunächst für Eure Antworten, die haben mir sehr weiter geholfen. Ich hatte im Grunde Eure Lösung schon angewandt, aber mir hat die Position Angabe im moduletable Abschnitt jedesmal die Formatierung zerrissen. Da war mein Fehler. Dank Eurer Hilfe sieht meine Implementierung jetzt wie folgt aus und macht das, was sie soll:

Der HTML Code:
HTML-Code:

<div class"row-fluid">
  <div class="span12">
      <div class="span5" id="fav-logo">
            "Content of span5"
            </div>
            <div class="span7" id="fav-logo">
            <div class="moduletable">
                <img />
            </div>
            <div id="gradient"></div>
      </div>
  </div>
</div>

und das zugehörige CSS:
HTML-Code:

.row-fluid {
float: left;
display: block;
min-height: 30px;
box-sizing: border-box;
}

.span12 {
width: 100%;
}

.span5 {
width: 40.17%;
}

.span7 {
position:relative;
width: 57.26%;
}

.moduletable {
}

#gradient {
width: 100%;
height: 100%;
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(92,134,196,1) 0%,rgba(92,134,196,0.5) 30%,rgba(92,134,196,0.5) 70%,rgba(92,134,196,1) 100%); /* W3C */
position: absolute;
left: 0;
top: 0;
z-index: 2;
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 16:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023