zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Image in <div> mit Transparenzverlauf überlagern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.07.2015, 15:44
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 29.07.2015
Beiträge: 2
Vagabond97 befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.07.2015, 16:15
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
  
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard
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.)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.07.2015, 17:01
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard
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
Mit Zitat antworten
  #4 (permalink)  
Alt 30.07.2015, 12:30
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 29.07.2015
Beiträge: 2
Vagabond97 befindet sich auf einem aufstrebenden Ast
Daumen hoch
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;
}
Mit Zitat antworten
Antwort

Stichwörter
div, image, transparenz, verlauf

« Vorheriges Thema | Nächstes Thema »

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mit Schleife Script reduzieren css_user Javascript & Ajax 3 27.06.2013 15:51
mouseover problem Basti82 Javascript & Ajax 0 13.10.2008 14:17
CSS Hack dalmidog CSS 1 28.03.2008 17:32
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 14:06
im FF wird <div> mit image angezeigt. im IE nicht. goldenboy CSS 2 27.06.2006 13:10


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

Datenschutzerklärung - Impressum - Archiv - Nach oben

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

© Dirk H. 2003 - 2023