Handboek Annuleren

Verlopen toepassen op een achtergrond

Zoeken

Laatst bijgewerkt op 2 mei 2021

Gebruik dit onderwerp voor meer informatie over hoe u het deelvenster CSS ontwerpen gebruikt om verlopen op de achtergrond van uw webpagina toe te passen en te bewerken.

Met het deelvenster CSS ontwerpen kunt u verlopen toepassen op de achtergronden van uw websites. De eigenschap 'gradient' voor verlopen is beschikbaar in de achtergrondcategorie.

Klik op naast de eigenschap 'gradient' om het deelvenster voor verlopen te openen. Met dit deelvenster kunt u:

Kleuren kiezen uit verschillende kleurmodellen (RGBa, Hexadecimaal of HSLa). De verschillende kleurcombinaties kunt u vervolgens opslaan als kleurstalen.
- Als u de nieuwe kleur wilt terugzetten naar de oorspronkelijke kleur, klikt u op de oorspronkelijke kleur (K).
- Als u de volgorde van de stalen wilt wijzigen, sleept u de stalen naar de gewenste positie.
- Als u een kleurstaal wilt verwijderen, sleept u de kleurstaal uit het deelvenster.
Kleurstoppen gebruiken om complexe verlopen te maken. Klik ergens tussen de standaardkleurstoppen om een kleurstop te maken. Als u een kleurstop wilt verwijderen, sleept u de kleurstop uit het deelvenster.
De hoek voor het lineaire verloop opgeven.
Om het patroon te herhalen, bewerkt u de eigenschap Background Repeat.
Aangepaste gradient-elementen opslaan als stalen.

Laten we eens kijken naar de volgende code:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)

57deg: geeft de hoek van het lineaire verloop aan
rgba(255, 255, 255, 1.00): kleur voor de eerste kleurstop
0%: geeft de kleurstop aan

Opmerking:

In Dreamweaver worden alleen procentuele waarden ('%') ondersteund voor kleurstoppen. Als u andere waarden gebruikt, zoals px of em, worden deze in Dreamweaver gelezen als 'nul'. Dreamweaver biedt ook geen ondersteuning voor CSS-kleuren. Als u deze kleuren opgeeft in de code, worden ze gelezen als 'nul'.

Verlopen weergeven in webbrowsers

Wanneer u verlopen als achtergrond gebruikt, kunt u Dreamweaver configureren om de verlopen correct weer te geven in verschillende webbrowsers. Dreamweaver voegt de juiste voorvoegsels van leveranciers toe aan de code waarmee webbrowsers worden ingeschakeld om verlopen op correcte wijze weer te geven.

In Dreamweaver kunnen de volgende voorvoegsels van leveranciers worden geschreven, samen met de W3C-indeling:

WebKit
Firefox
Opera

In Dreamweaver worden standaard de voorvoegsels voor WebKit en Dreamweaver Live View geschreven. De overige vereiste leveranciers kunt u selecteren in het dialoogvenster Voorkeuren (Voorkeuren > CSS-stijlen).

Opmerking:

Voor de schaduw van vakken worden altijd WebKit- en W3C-voorvoegsels gegenereerd, ongeacht of u deze hebt geselecteerd bij Voorkeuren.

Wijzigingen in verlopen worden ook in elke leveranciersspecifieke syntaxis weergegeven. Als u een bestaand bestand met leveranciersspecifieke syntaxis opent in Dreamweaver CC, moet u ervoor zorgen dat de vereiste leveranciersvoorvoegsels zijn geselecteerd bij Voorkeuren. Dit is nodig omdat in Dreamweaver standaard alleen code voor WebKit en Dreamweaver Live View wordt bijwerkt als u verlopen gebruikt of wijzigt. Andere leveranciersspecifieke syntaxis in uw code wordt dus niet bijgewerkt.

Achtergrondafbeeldingen en verlopen omwisselen

U kunt met één klik de volgorde wijzigen waarin achtergrondafbeeldingen en verlopen worden weergegeven in de code.

Klik de pijl naast naast de url of de eigenschap gradient in CSS ontwerpen.

Opmerking:

Dreamweaver CC bevat een basisimplementatie van de functie voor het omwisselen van achtergronden. Met meerdere waarden of afbeeldingen werkt het omwisselen mogelijk niet zoals verwacht. Stel dat u werkt met een afbeelding en een tweede afbeelding en een verloop hebt toegepast op de achtergrond. Wanneer u het verloop omwisselt, krijgt u de volgende volgorde: verloop, tweede afbeelding en eerste afbeelding.