kostenloser Webspace werbefrei: lima-city

Ränder eines Bildes mit Farbe überdecken

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   schinkenmedia

   

   schinkenmedia hat kostenlosen Webspace.

   18:02, 17.5.2015

   Hey,
   
   ich schlage mich nun schon seit ein paar Stunden damit rum:
   
   Ich möchte den Slider ganzseitig haben - so wie er jetzt ist.
   
   http://schinkenmedia.lima-city.de/
   
   Links und Rechts, da wo der background ist, soll der Slider aber mit einer Farbe überdeckt werden (grau, 40%). So soll der Slider dann im Background noch zu sehen sein, aber eben verblasster.
   
   Ich habe es schon mit CSS clipping versucht, komme aber absolut nicht weiter.
   
   Es würde ja eigentlich schon ausreichen, wenn ich das komplette Bild entsprechend ausgraue und die Mitte (1170px) Transparent mache.
   
   Hat irgendwer eine Idee wie ich das am besten anstelle?
   
   Grüße
   
   
   Beitrag zuletzt geändert: 17.5.2015 18:32:48 von schinkenmedia

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. atraxoo

   atraxoo hat kostenlosen Webspace.

   19:12, 17.5.2015

   Hey,
   
   Ist jetzt vielleicht nicht die 'schönste' Lösung, aber was wenn du einfach einen Div- Container drüberlegst, vlt mit width:98%, und dann je links und rechts einen Rand mit eben Farbe grau, opaciy 0.4 und width 1% machst?
   
4. Autor dieses Themas

   schinkenmedia

   

   schinkenmedia hat kostenlosen Webspace.

   19:20, 17.5.2015

   atraxoo schrieb:
   Hey,
   
   Ist jetzt vielleicht nicht die 'schönste' Lösung, aber was wenn du einfach einen Div- Container drüberlegst, vlt mit width:98%, und dann je links und rechts einen Rand mit eben Farbe grau, opaciy 0.4 und width 1% machst?
   

   
   
   
   Hi,
   
   leider ist der Abstand Rechts und links nicht immer 1% groß. Die Seite ist Responsive und hat ihre feste Größe bei 1170px, danach kommen dann entsprechend die Seitenabstände so, dass die 1170px immer zentriert in der Mitte sind.
   
   
   EDIT: Ich habe es jetzt mit Javascript gelöst:
   
   

   <script language="javascript" type="text/javascript">
   		
   		var width = document.body.clientWidth;
   		var height = document.body.clientWidth;
   	
   
          		var grayoutleft = document.getElementById("grayout-left");
          		grayoutleft.style.width = (width - 1170) / 2 + "px";
          		grayoutleft.style.height = height + "px";
   
          		var grayoutright = document.getElementById("grayout-right");
          		grayoutright.style.width = (width - 1170) / 2 + "px";
          		grayoutright.style.height = height + "px";
   
   
   
   
   
           window.onresize = function() {
   
          		var grayoutleft = document.getElementById("grayout-left");
          		grayoutleft.style.width = (width - 1170) / 2 + "px";
   
          		var grayoutright = document.getElementById("grayout-right");
          		grayoutright.style.width = (width - 1170) / 2 + "px";
   		};
   </script>

   
   
   Beitrag zuletzt geändert: 17.5.2015 20:21:40 von schinkenmedia

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?