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

Question

我有一个java插件,在我左边设置一个菜单,然后在右边设置生成的动态数据.单击菜单项时,右侧的相应数据将滚动到顶部.右边的数据是一个很长的列表,当你单击一个菜单项时,你不会只看到一个(单个)结果,它只会将一个结果带到页面顶部,其余的都在它下面.

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

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

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

Answer 1

渐变不一定有褪色,这是一种误解,让我们说你希望你的div从顶部开始是70%红色(实体),你的CSS会是.

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

两种方法:

使用渐变:

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

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

没有渐变

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

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

Answer 2

作为对已接受答案的更新：

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