Auf Thema antworten 2026

Beitrag

<blockquote data-quote="C_Motion_Graphics" data-source="post: 2080810" data-attributes="member: 493502">AW: Gradient-Overlay &lt;img&gt;-TagNe 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 &lt;img&gt;-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]&lt;table class=&quot;featured_sites&quot; align=&quot;center&quot; border=&quot;0&quot;&gt;&nbsp; &nbsp; &lt;thead&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h3 class=&quot;table_title&quot;&gt;Some of our featured sites&lt;/h3&gt;&nbsp; &nbsp; &lt;/thead&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td id=&quot;td_left_top&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;&lt;?php echo $site_url[0]?&gt;&quot;&gt;&lt;div alt=&quot;site01&quot; id=&quot;site01&quot;/&gt;&lt;/div&gt;&lt;br&gt;&lt;?php echo $site_names[0]?&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td id=&quot;td_right_top&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;&lt;?php echo $site_url[1]?&gt;&quot;&gt;&lt;div width=&quot;350&quot; height=&quot;200&quot; alt=&quot;site02&quot; id=&quot;site02&quot;/&gt;&lt;/div&gt;&lt;br&gt;&lt;?php echo $site_names[1]?&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td id=&quot;td_left_bottom&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;&lt;?php echo $site_url[2]?&gt;&quot;&gt;&lt;div alt=&quot;site03&quot; id=&quot;site03&quot;/&gt;&lt;/div&gt;&lt;br&gt;&lt;?php echo $site_names[2]?&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;td id=&quot;td_right_bottom&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;&lt;?php echo $site_url[3]?&gt;&quot;&gt;&lt;div alt=&quot;site04&quot; id=&quot;site04&quot;/&gt;&lt;/div&gt;&lt;br&gt;&lt;?php echo $site_names[3]?&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tfoot&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;right&quot;&gt;All sites powered by&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;?php echo $user; ?&gt;&lt;/a&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &lt;/tfoot&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/table&gt;[/HTML]und hier der &lt;style&gt;-Teil:[CODE]&lt;style type=&quot;text/css&quot;&gt;/*This is ONLY for the featured sites images*/&nbsp; &nbsp; #site01 {&nbsp; &nbsp; &nbsp; &nbsp; width: 350px;&nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 40px;&nbsp; &nbsp; &nbsp; &nbsp; /*gradient*/&nbsp; &nbsp; &nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, right bottom, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(0%, rgba(242,246,248,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(50%, rgba(140,140,140,0.2)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(51%, rgba(181,198,208,0.4)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(100%, rgba(255,255,255,0))), url(&lt;?php echo $site_img[0]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; background-image: -moz-linear-gradient(-45deg, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(242,246,248,0) 0%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(216,225,231,0.2) 50%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(181,198,208,0.4) 51%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(224,239,249,0) 100%), url(&lt;?php echo $site_img[0]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#039;#00f2f6f8&#039;, endColorstr=&#039;#00e0eff9&#039;,GradientType=1 );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #site02 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 350px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*gradient*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, right bottom, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(0%, rgba(242,246,248,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(50%, rgba(140,140,140,0.2)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(51%, rgba(181,198,208,0.4)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(100%, rgba(255,255,255,0))), url(&lt;?php echo $site_img[1]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: -moz-linear-gradient(-45deg, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(242,246,248,0) 0%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(216,225,231,0.2) 50%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(181,198,208,0.4) 51%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(224,239,249,0) 100%), url(&lt;?php echo $site_img[1]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#039;#00f2f6f8&#039;, endColorstr=&#039;#00e0eff9&#039;,GradientType=1 );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #site03 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 350px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(&lt;?php echo $site_img[2]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*gradient*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(0%, rgba(242,246,248,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(50%, rgba(140,140,140,0.2)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(51%, rgba(181,198,208,0.4)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(100%, rgba(255,255,255,0))), url(&lt;?php echo $site_img[2]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: -moz-linear-gradient(-45deg, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(242,246,248,0) 0%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(216,225,231,0.2) 50%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(181,198,208,0.4) 51%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(224,239,249,0) 100%), url(&lt;?php echo $site_img[2]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#039;#00f2f6f8&#039;, endColorstr=&#039;#00e0eff9&#039;,GradientType=1 );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #site04 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 350px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*gradient*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: -webkit-gradient(linear, left top, right bottom, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(0%, rgba(242,246,248,0)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(50%, rgba(140,140,140,0.2)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(51%, rgba(181,198,208,0.4)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color-stop(100%, rgba(255,255,255,0))), url(&lt;?php echo $site_img[3]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: -moz-linear-gradient(-45deg, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(242,246,248,0) 0%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(216,225,231,0.2) 50%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(181,198,208,0.4) 51%, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rgba(224,239,249,0) 100%), url(&lt;?php echo $site_img[3]; ?&gt;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#039;#00f2f6f8&#039;, endColorstr=&#039;#00e0eff9&#039;,GradientType=1 );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &lt;/style&gt;[/CODE]ist jetzt nicht der effizienteste Code aller Zeiten, aber er funktioniert <img src="/styles/default/xenforo/smilies/biggrin.gif"&nbsp; class="smilie" loading="lazy" alt=":D" title="Big Grin&nbsp; &nbsp; :D" data-shortname=":D" />GrüßeChristian</blockquote>

[QUOTE="C_Motion_Graphics, post: 2080810, member: 493502"] [b]AW: Gradient-Overlay <img>-Tag[/b] 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> <?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> <?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> <?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> <?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> [/HTML] 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> [/CODE] ist jetzt nicht der effizienteste Code aller Zeiten, aber er funktioniert :D Grüße Christian [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?