Divers fonds

Divers fonds

Revoyons la façon de placer une ou des images ou de placer une ou plusieurs couleurs, en fond de boîte.

Exemple 1

<p style="float:left; width: 15vw; height: 15vw; border: 0.2vw solid black; background: url('http://ekladata.com/Sm1oA1ImUvX8ToJjnJtMyXWzQBs/00004.jpg');"> </p>

L'image est ici une texture qui remplit entièrement le cadre.

Exemple 2

<p style="float:left; width: 15vw; height: 15vw; border: 0.2vw solid black; background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 14%, rgb(100,100,100) 20%);"> </p>

Le dégradé est ici répété et incliné à 180 degrés.

Exemple 3

<p style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; background: linear-gradient(to right, rgba(51,0,204,1) 0%,rgba(51,0,204,1) 33%,rgba(255,255,255,1) 34%,rgba(255,255,255,1) 66%, rgba(255,51,102,1) 67%,rgba(255,51,102,1) 100%);"> </p>

3 bandes verticales en opacité réglable par le code rgba.

Exemple 4

<p style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; background: url('http://ekladata.com/S_cGA68ClBc26Ct7RJO9Jni-gCw/2336.jpg'), url('http://ekladata.com/V7wsGzLrY7Ec7PdhAotcvVVxVOY/bacteria4.jpg'), url('http://ekladata.com/6JHzcYuXxd8ivjUBhaXzUQL5Gvw/b2green2.jpg'), url('http://ekladata.com/V6-SOjH6KiDBOKKtx3Ldp6GkV6s/bricks5.jpg'); background-repeat: no-repeat; background-position: 0% 0%, 33% 0%,66% 0%, 100% 0%; background-size: 25% 100%;"> </p>

Au lieu de 3 bandes couleur, 4 bandes texture.

Exemple 5

<p style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; background: url('http://ekladata.com/S_cGA68ClBc26Ct7RJO9Jni-gCw/2336.jpg'), url('http://ekladata.com/V7wsGzLrY7Ec7PdhAotcvVVxVOY/bacteria4.jpg'), url('http://ekladata.com/6JHzcYuXxd8ivjUBhaXzUQL5Gvw/b2green2.jpg'), url('http://ekladata.com/V6-SOjH6KiDBOKKtx3Ldp6GkV6s/bricks5.jpg'); background-repeat: no-repeat; background-position: 0% 0%, 0% 33%,0% 66%, 0% 100%; background-size: 100% 25%; text-align: center; font-size: 2.5vw; color: white; text-shadow: 0.1vw 0.1vw black; line-height: 15vw;">Exemple 5</p>

Le même mais avec des bandes horizontales

Exemple 5

<p style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; background: repeating-radial-gradient(#ff9966, #ff9966 5vh, white 5vh, white 10vh); text-align: center; font-size: 2.5vw; color: white; text-shadow: 0.1vw 0.1vw black; line-height: 15vw;">Exemple 5</p>

Exemple 6

Revenons à des exemples plus simples:
L'opacité d'une couleur de fond peut être définie par l'emploi d'un code couleur rgba.
Survolez l'exemple 6
En ajoutant un code CSS3, on peut faire varier l'opacité de la couleur fond.
<p id="x6" style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; text-align: center; font-size: 2.5vw; color: white; text-shadow: 0.1vw 0.1vw black; line-height: 15vw;">Exemple 6</p>
<style></style>

Exemple 7

On peut, de la même manière, changer la couleur de fond au survol.
<p id="x7" style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; text-align: center; font-size: 2.5vw; color: white; text-shadow: 0.1vw 0.1vw black; line-height: 15vw;">Exemple 7</p>
<style></style>

Exemple 8

Par contre et d'après ce que j'ai lu, il n'est pas possible de modifier en rotation, une image de fond de cette manière, sans javascript.
Nous pouvons placer une image en arrière-plan, la modifier selon nos choix mais sans d'animation, mais sans la placer en fond.

Exemple 9

Nous pouvons donner une animation au fond mais sans transition douce.
Est-ce intéressant et pas trop difficile à lire ?
<p style="float: left; width: 15vw; height: 15vw; border: 0.2vw solid black; text-align: center; font-size: 2.5vw; color: white; text-shadow: 0.1vw 0.1vw black; line-height: 15vw; animation: dde 20s linear infinite;">Exemple 9</p>
<style></style>

Exemple 10

Même principe mais avec des gradients.