Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Gradient-Overlay <img>-Tag“

C_Motion_Graphics

C_Motion_Graphics

Nicht mehr ganz neu hier

Hallo,

ich habe zur Zeit das Problem, dass ich gerne ein Verlauf über ein Bild hätte. Ich habe mit einem Gradient-Generator einen Verlauf erzeugt (rgba). Jetzt würde ich gerne diesen über das Bild legen. Leider kann ich aus technischen Gründen das Bild nicht im Stylesheet als background setzten. Hat jmd. eine Ahnung, wie man so etwas realisieren kann?

Hier der entsprechende HTMl-Abschnitt: (Ausschnitt aus einer Tabelle)
HTML: 
	<tr>
    	<td id="td_left_top" align="center"><a href="site01"><img src="<?php echo $site_path[0]; ?>" width="350" height="200" alt="site01" class="featured_sites"/><br>SITE01</a></td>
	<td id="td_right_top" align="center"><a href="site02"></a><img src="<?php echo $site_path[1]; ?>" width="350" height="200" alt="site02" class="featured_sites"/><br>SITE02</td>
	</tr>

Und hier der Teil aus der main.css:
Code: 
table * img {
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(243,243,243,0.98) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(243,243,243,0.98)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(243,243,243,0.98) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(243,243,243,0.98) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(243,243,243,0.98) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(243,243,243,0.98) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

Wie ihr gesehen habt, wird der imv-Pfad aus einer PHP_Variable gezogen, deshalb kann ich das Bild nicht im CS-Sheet einbinden.
Vielen Dank für eure Hilfe,

Christian
 

T

TECFreddy

"alles und nichts"-Könner

AW: Gradient-Overlay <img>-Tag

Du kannst dir ein 1x1 px großes, transparentes bild machen, dass du fix einbindest. Und per eingebettetem style gibst du nen bg.
HTML: 
<tr>
<td id="td_left_top" align="center"><a href="site01"><img src="fakebild.png" width="350 height="350" alt="site01" class="features_sites" style="background: url("<?php echo $site_path[0]; ?>");"/><br /> SITE01</a></td>
</tr>
Ist zwar mehr gemauschelt aber so rein theoretisch sollte es funktionieren.
Schlagt mich nicht wenn es nicht geht :D
 
Zuletzt bearbeitet:
C_Motion_Graphics

C_Motion_Graphics

Nicht mehr ganz neu hier

AW: Gradient-Overlay <img>-Tag

Mhhh das geht auch nicht... Dadurch dass der style="" "über" dem CSS "steht" ist der Verlauf immer noch im Hintergrund...
Es würde gehen, wenn man background: url (); unten im CSS-Selektor einfügt, aber das würde nicht mehr ins Konzept passen, ich möchte ja, dass die URL zum Bild aus einer Variable gelesen wird und das geht ja in .css Dokumenten nicht...
 
C

CooperCpp

Noch nicht viel geschrieben

AW: Gradient-Overlay <img>-Tag

Wieso nimmst du nicht das Bild und machst mit Photoshop deinen Verlauf drüber? Da du ja als Link eh ein Bild benutzt, mach das Bild halt gleich richtig
 
C_Motion_Graphics

C_Motion_Graphics

Nicht mehr ganz neu hier

AW: Gradient-Overlay <img>-Tag

Ne das ganze soll dynamisch sein, d. h. ich kann einfach nur das Bild auswechseln und muss nicht extra Photoshop dafür starten... das ganze soll SEHR nutzerfreundlich sein..
Hab es jetzt aber hinbekommen. Der Tipp von TECFreddy hat mir geholfen. Danke nochmal!
Ich hab jetzt statt dem <img>-Tag ein Div genommen und jedem der 4 divs eine id gegeben. Dann mit CSS die Breite und Höhe gesetzt und einen Verlauf drüber gelegt und ein jenes Bild in den Hintergrund.
Diese Geschichten habe ich in der index.php gemacht und NICHT in der main.css, damit ich PHP-Varibalen nutzen kann. Wenn es interessiert, hier der Code:
Die Tabelle
HTML: 
<table class="featured_sites" align="center" border="0">
	<thead>
		<h3 class="table_title">Some of our featured sites</h3>
	</thead>

	<tr>
		<td id="td_left_top" align="center"><a href="<?php echo $site_url[0]?>"><div alt="site01" id="site01"/></div><br><?php echo $site_names[0]?></a></td>
		<td id="td_right_top" align="center"><a href="<?php echo $site_url[1]?>"><div width="350" height="200" alt="site02" id="site02"/></div><br><?php echo $site_names[1]?></a></td>
	</tr>
	<tr>
		<td id="td_left_bottom" align="center"><a href="<?php echo $site_url[2]?>"><div alt="site03" id="site03"/></div><br><?php echo $site_names[2]?></a></td>
		<td id="td_right_bottom" align="center"><a href="<?php echo $site_url[3]?>"><div alt="site04" id="site04"/></div><br><?php echo $site_names[3]?></a></td>
	</tr>
			  	
	<tfoot>
		<tr>
			<td align="right">All sites powered by</td>
			<td align="left"><a href="#"><?php echo $user; ?></a></td>
		</tr>
	</tfoot>
			 
</table>

und hier der <style>-Teil:
Code: 
<style type="text/css">
/*This is ONLY for the featured sites images*/
	#site01 {
		width: 350px;
		height: 200px;
		border-radius: 40px;
		/*gradient*/
		background-image: -webkit-gradient(linear, left top, right bottom, 
			from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
			color-stop(0%, rgba(242,246,248,0)),
			color-stop(50%, rgba(140,140,140,0.2)),
			color-stop(51%, rgba(181,198,208,0.4)),
			color-stop(100%, rgba(255,255,255,0))), url(<?php echo $site_img[0]; ?>);
		background-image: -moz-linear-gradient(-45deg, 
			rgba(242,246,248,0) 0%, 
			rgba(216,225,231,0.2) 50%,
			rgba(181,198,208,0.4) 51%, 
			rgba(224,239,249,0) 100%), url(<?php echo $site_img[0]; ?>);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f6f8', endColorstr='#00e0eff9',GradientType=1 );
		}

		#site02 {
			width: 350px;
			height: 200px;
			border-radius: 40px;
			/*gradient*/
			background-image: -webkit-gradient(linear, left top, right bottom, 
					from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
					color-stop(0%, rgba(242,246,248,0)),
					color-stop(50%, rgba(140,140,140,0.2)),
					color-stop(51%, rgba(181,198,208,0.4)),
					color-stop(100%, rgba(255,255,255,0))), url(<?php echo $site_img[1]; ?>);
			background-image: -moz-linear-gradient(-45deg, 
				rgba(242,246,248,0) 0%, 
				rgba(216,225,231,0.2) 50%,
				rgba(181,198,208,0.4) 51%, 
				rgba(224,239,249,0) 100%), url(<?php echo $site_img[1]; ?>);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f6f8', endColorstr='#00e0eff9',GradientType=1 );

		}

		#site03 {
			width: 350px;
			height: 200px;
			border-radius: 40px;
			background-image: url(<?php echo $site_img[2]; ?>);
			/*gradient*/
					from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
					color-stop(0%, rgba(242,246,248,0)),
					color-stop(50%, rgba(140,140,140,0.2)),
					color-stop(51%, rgba(181,198,208,0.4)),
					color-stop(100%, rgba(255,255,255,0))), url(<?php echo $site_img[2]; ?>);
			background-image: -moz-linear-gradient(-45deg, 
				rgba(242,246,248,0) 0%, 
				rgba(216,225,231,0.2) 50%,
				rgba(181,198,208,0.4) 51%, 
				rgba(224,239,249,0) 100%), url(<?php echo $site_img[2]; ?>);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f6f8', endColorstr='#00e0eff9',GradientType=1 );

		}

		#site04 {
			width: 350px;
			height: 200px;
			border-radius: 40px;
			/*gradient*/
			background-image: -webkit-gradient(linear, left top, right bottom, 
					from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
					color-stop(0%, rgba(242,246,248,0)),
					color-stop(50%, rgba(140,140,140,0.2)),
					color-stop(51%, rgba(181,198,208,0.4)),
					color-stop(100%, rgba(255,255,255,0))), url(<?php echo $site_img[3]; ?>);
			background-image: -moz-linear-gradient(-45deg, 
				rgba(242,246,248,0) 0%, 
				rgba(216,225,231,0.2) 50%,
				rgba(181,198,208,0.4) 51%, 
				rgba(224,239,249,0) 100%), url(<?php echo $site_img[3]; ?>);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f6f8', endColorstr='#00e0eff9',GradientType=1 );
		}

	</style>
ist jetzt nicht der effizienteste Code aller Zeiten, aber er funktioniert :D

Grüße
Christian
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 1.090 (Mitglieder: 1, Gäste: 1.089)
Robots: 390

Statistik des Forums

Themen
175.189
Beiträge
2.582.077
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben