我想只为我的div的一部分添加背景颜色

I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.

我有一个java插件，在我左边设置一个菜单，然后在右边设置生成的动态数据。单击菜单项时，右侧的相应数据将滚动到顶部。右边的数据是一个很长的列表，当你单击一个菜单项时，你不会只看到一个（单个）结果，它只会将一个结果带到页面顶部而其余部分位于页面顶部。

So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.

所以我想做的是在顶部设置一种颜色，以引起注意，这是你要求的结果;对我来说最好的事情就是让它识别你点击的内容并设置背景颜色，但我不知道该怎么做，或者写java所以如果我能得到任何帮助就会很好。

The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.

div是移动的，所以我在CSS3中使用线性渐变将颜色设置为页面的顶部百分比，但是当您单击另一个菜单项时它会移开，因为div会向上移动。我有一个CSS3动画但是，因为IE遗憾的是仍然存在，我需要一些兼容浏览器和旧版浏览器的东西。我发现的唯一的东西是我不想要的CSS3渐变：我不需要渐变，我需要一块颜色而不需要另外一个div，因为就像我说的那样，数据是动态的并且它并不总是相同的那个div。

The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.

渐变很好，因为我可以设置一个百分比，这是我正在寻找但它有一个淡入淡出，我不想要，如果有一个不是CSS3的解决方案，我希望如此。即使有一种方法可以在CSS3中做到这一点，请告诉我，只要它不会做渐变淡出。否则，如果有人对如何引起对这一部分的关注有任何好的想法，我会对所有想法持开放态度。

2 个解决方案

#1

Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.

渐变不一定有褪色，这是一种误解，让我们说你希望你的div从顶部开始是70％红色（实体），你的CSS会是。

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

Two Methods:

With Gradients:

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%)  
}

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

小提琴 - > http://jsfiddle.net/QjqYt/

Without Gradients

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;
}

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

小提琴 - > http://jsfiddle.net/6cKZL/1/

#2

Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.

Rodney - 您可以使用Colorzilla制作自己的自定义渐变。您可以使用在线工具制作任何类型的渐变，它会为您提供CSS代码。它还有一个选项，使IE兼容。

Note: If someone deems this 'comment-ish' - I can move it.

注意：如果有人认为这是'评论 - 是' - 我可以移动它。