Ich möchte den Hintergrund eines unregelmäßig geformten Bildes vollständig entfernen und es nicht nur transparent machen. Die Box des Bildes überschneidet sich mit anderen Dingen und steht im Weg. Es muss eine Möglichkeit geben, den zusätzlichen Platz zu entfernen.
Ich habe mein Bild so genau wie möglich in Photoshop zugeschnitten und den verbleibenden Hintergrund transparent gemacht. Mein Bild ist oben breiter als unten (stellen Sie sich eine vertikale Zuckerstange vor), sodass viel leerer Raum bleibt, der sich mit anderen Objekten auf der Seite überschneidet.
Es muss eine Möglichkeit geben, den zusätzlichen Platz zu entfernen.
Kurze Antwort: Sie können nicht.
Lange Antwort: Sie können nicht, aber Sie müssen nicht. Niemand sonst versucht es auch nur.
(Qualifikation: Ich mache meinen Lebensunterhalt mit Webentwicklung und unterrichte es auf Universitätsniveau)
Alles auf einer Webseite ist ein Rechteck. Seit dem Mosaic 1.0-Browser im Jahr 1993 war das immer so. Transparenz existiert, um die Illusion von nicht rechteckigen Formen zu erzeugen, und sie wird so ziemlich überall verwendet.
Was Sie also mit Ihrer Zuckerstange tun, stellt sie in den Hintergrund. Entweder als Hintergrundbild-Eigenschaft, wo Sie es ganz einfach mit background-position herumschieben können, oder verwenden Sie position: absolute auf dem <img>-Tag und gehen Sie von dort aus.
Wenn Sie möchten, dass Ihr Text um ein unregelmäßiges Objekt herumfließt, ist der übliche Weg ein Stapel leerer <div>-Objekte und die kreative Verwendung von Float. Es ist viel Zeit, es richtig zu machen, ich habe die meisten Designer darauf trainiert, es nicht zu tun.
clip-path ist vielversprechend, aber bis Microsoft auf dem neuesten Stand ist, akzeptieren wir entweder, dass MSIE-Benutzer etwas anderes sehen, oder wir tun etwas anderes.
Wie Scott bereits betonte: Jedes Bild überall auf der Welt ist rechteckig. Sie können Teile dieses Rechtecks nicht 'entfernen'.
CSS bietet Ihnen jedoch einige Optionen, um noch einen Schritt weiter zu gehen.
Option 1: Grenzradius
Sie könnten den Border-Radius von css verwenden , um einen Teil des überschüssigen Platzes unten zu löschen. Border-Radius wird für abgerundete Ecken verwendet, aber Sie können für jede Ecke einen Wert übergeben. Sie können also unten mehr abschneiden als oben.
Option 2: Beschneidungspfad
CSS3 bietet auch eine vollwertige Clipping-Eigenschaft . Es ist ein bisschen schwierig, sich zurechtzufinden, aber wenn man es einmal verstanden hat, kann es eine sehr mächtige Funktion sein. Sie können SVG-Maskierung verwenden, um Teile Ihres Bildes zu „löschen“. Im Moment ist die Browserunterstützung bestenfalls in Ordnung, also seien Sie vorsichtig, wenn Sie IE und ältere Browser unterstützen möchten.
PS: Wenn Sie die wunderbare CSS-Tricks- Website noch nicht kannten , lernen Sie sie jetzt kennen und lieben, wenn Sie ernsthaft mit dem Thema Webdesign beginnen möchten.
Zach Saucier
Scott
Scott
Amanda
Scott
Ryan