web-dev-qa-db-fra.com

Je veux ajouter une couleur d'arrière-plan uniquement à une partie de mon div

J'ai un Java qui définit un menu à ma gauche, puis les données dynamiques résultantes à droite. Lorsque vous cliquez sur un élément de menu, les données correspondantes à droite défilent vers le haut. Les données à droite se trouve une longue liste, lorsque vous cliquez sur un élément de menu, vous ne voyez pas qu'un seul résultat (seul), il l'amène simplement en haut de la page et les autres sont en dessous.

Donc, ce que je voudrais faire, c'est définir une couleur sur la partie supérieure pour attirer l'attention sur le fait que c'est le résultat que vous avez demandé; la meilleure chose pour moi serait de lui faire reconnaître ce que vous avez cliqué et de définir une couleur d'arrière-plan, mais je ne sais pas comment faire, ou écrire Java donc si je pouvais obtenir de l'aide, je sois gentil.

Le div est ce qui bouge, j'ai donc défini une couleur sur un pourcentage supérieur de la page avec le linear-gradient dans CSS3 mais il s'éloigne lorsque vous cliquez sur un autre élément de menu, car le div se déplace vers le haut. J'ai une animation CSS3 mais, parce que IE malheureusement existe toujours, j'ai besoin de quelque chose pour la compatibilité du navigateur et pour les navigateurs plus anciens. Les seules choses que j'ai trouvées sont des dégradés CSS3 dont je ne veux pas: je pas besoin d'un dégradé, j'ai besoin d'un bloc de couleur sans faire une autre div car, comme je l'ai dit, les données sont dynamiques et ce n'est pas toujours la même chose dans cette div.

Le gradient est agréable, car je peux définir un pourcentage qui est ce que je cherche, mais il a un fondu, ce que je ne veux pas, et s'il y a une solution qui n'est pas CSS3, j'aimerais ça. Même s'il existe un moyen de le faire dans CSS3, faites-le moi savoir tant qu'il ne fera pas de dégradé. Sinon, si quelqu'un a des idées astucieuses sur la façon d'attirer l'attention sur cette section, je suis ouvert à toutes les idées.

css3htmlbackground-color
21
Rodney Maspoch

Les dégradés n'ont PAS nécessairement un fondu, c'est une idée fausse, disons que vous voulez que votre div soit 70% rouge (solide) à partir du haut, votre CSS le sera.

background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)

Deux méthodes:

Avec des dégradés:

div{    
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);
    background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
    background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)  
}

Violon -> http://jsfiddle.net/QjqYt/

Sans dégradés

div{
    position:relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);  
}

div:before{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:70%;
    content:"";
    background-color:red;
}

Violon -> http://jsfiddle.net/6cKZL/1/

44
Raj Nathani

Rodney - Vous pouvez utiliser Colorzilla pour créer votre propre dégradé personnalisé. Vous pouvez créer tout type de dégradé avec l'outil en ligne et il vous donne le code CSS. Il a également une option pour le rendre IE compatible.

Remarque: Si quelqu'un juge ce 'commentaire-ish' - je peux le déplacer.

2
lloan

En tant que mise à jour de la réponse acceptée:

.only-start{
  background: linear-gradient(
    to right,
    red,
    red 1rem,
    transparent 1rem,
    transparent 100%
  );
}
0
mattinsalto