28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai utilisé la commande avec et sans lien vers l'image mais au moment d'afficher ma page, je devine que mon dégradé est bien présent mais ensuite le visuel en BG passe par dessus... ou le remplace, mais mon dégradé ne passe pas sur l'image.

J'ai donc utilisé :
.home-row {
background: linear-gradient(135deg, red,30%, transparent) url("/img/monimage.jpg");
}


et sans URL vers l'image
.home-row {
background: linear-gradient(135deg, red,30%, transparent);
}
Modérateur
Salut,

Il manque une virgule entre le dégradé et l'image.
background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");

Modifié par _laurent (02 Jun 2020 - 14:11)
Oui, merci beaucoup pour cette correction. Ça fonctionne parfaitement Smiley cligne .

Après, j'utilise dans mon site Wordpress un metteur en page (WpBakery) qui permet d'ajouter des background avec parallax, l'image est donc intégrée depuis l'option dédiée.

Mais dans ce cas, mon dégradé s'affiche juste avant que le visuel le recouvre. Ce qui suppose que dans mon CSS, j'utilise alors l'option 2, soit sans URL image, dans la mesure où l'image est déjà présente.

Bref, j'ai conscience qu'on sort un peu des problématiques CSS "standards" mais y aurait un test qui permette de tenter de contourner ce pb ? Smiley confus
Modérateur
Salut,

J'ai beau relire j'arrive pas à comprendre. Tu insère ton image avec wpBakery pour le parralaxe ca c'est bon. Ton gradient tu veux le rajouter en CSS en plus de cette image c'est ca ? Qu'est-ce que tu veux contourner ?
Modérateur
Pas sur non plus mais attention, si tu définis 2x "background: …", il n'y en a qu'un qui s'applique et qui va écraser l'autre. Tu dois bien utiliser une virgule pour en définir deux.
Désolé mon explication n'est pas très claire je reconnais. En fait, j'utilise Wpbakery mais qui intègre en plus les fonction d'un plugin "Ultimate addons" qui permet des background en parallax avancés.

Un fois la photo en BG intégrée, j'aurais souhaité pouvoir ajouter par dessus un dégradé (blanc à transparent) en CSS. Hors, mon dégradé s'applique bien mais en dessous de la photo.

Et même si j'utilise un CSS qui intègre la photo, à supposer que je renonce au plugin, soit
background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");
le résultat est toujours le même dans WPBakery et donc, le dégradé en dessous...
Modérateur
Ok c'est plus clair merci,

goudurisc a écrit :
Un fois la photo en BG intégrée, j'aurais souhaité pouvoir ajouter par dessus un dégradé (blanc à transparent) en CSS. Hors, mon dégradé s'applique bien mais en dessous de la photo.

- Si tu appliques le gradient sur le même élément il va être écrasé comme le dit Yordi
- Si tu appliques le gradient sur le parent, l'image va venir par dessus. Exemple : https://jsfiddle.net/undless/348s2Lkz/1/ (ca expliquerait pourquoi tu le vois au début)
- il faudrait que tu le rajoutes avec un pseudo élément par exemple : https://jsfiddle.net/undless/348s2Lkz/4/

goudurisc a écrit :
Et même si j'utilise un CSS qui intègre la photo, à supposer que je renonce au plugin, soit
background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");
le résultat est toujours le même dans WPBakery et donc, le dégradé en dessous...

Non normalement c'est dans le bon ordre : https://jsfiddle.net/undless/bpvfcsq6/1/
Modifié par _laurent (03 Jun 2020 - 14:27)
Merci beaucoup Laurent pour tous tes exemples. Au final, si j'ajoute un pseudo élément, ça donnerait :
.home-row::after {
   background: linear-gradient(135deg, red,30%, transparent)!important;
}

mais si c'est le cas, ça ne fonctionne toujours pas Smiley ohwell
Modérateur
Pourquoi mettre un !important ?
Ton site n'est pas en ligne qu'on puisse voir ? Sinon il faudrait voir le code qui affiche l'image.

Ymer62 a écrit :
ok sorry j'avais pas bien compris le truc le z-index n'a rien avoir ici...

Hahah si si ça peut Ymer62 mais ca implique qu'il ait mis le gradient sur un élément frere et je pense pas que c'était le cas pour le moment.
Modifié par _laurent (03 Jun 2020 - 16:15)
Ok comme, je propose un accès provisoire :

S'IDENTIFIER :

La photo est celle d'entête et le dégradé est à ajouter dans l'angle haut gauche à 45°
Actuellement, le dégradé est ajouté dans Photoshop, pas idéal...
Modifié par goudurisc (12 Jun 2020 - 15:40)
Modérateur
Super pour l’accès, merci.

Ha il y a déjà un ::after qui te gène je pense. Teste plutot sur l'élément en dessous :

.upb_row_bg::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, red,30%, transparent);
}
Meilleure solution
Whaou, je suis sincèrement impressionné, je pensais que le code généré par WpBakery et le plugin allait te rebuter et je n'y croyais pas trop. C'est donc magnifique, ça fonctionne parfaitement Smiley cligne
Et très probable que je m'en reserve régulièrement.
Un très grand merci pour tout le temps que tu as passé à régler mon pb !!!