css3 – 我想添加一个背景颜色只有我的div的一部分

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

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

div是什么移动,所以我将CSS3中的线性渐变的页面的最大百分比设置为一个颜色,但是当您单击另一个菜单项时,它会移开,因为div向上移动.我有一个CSS3动画,但因为IE不幸仍然存在,我需要一些浏览器兼容性和旧的浏览器.我发现的唯一的东西是CSS3渐变,我不需要渐变,我需要一块颜色,而不需要另一个div,因为像我说的那样,数据是动态的,并不总是一样的那个div

渐变是很好的,因为我可以设置一个百分比,这是我想要的,但它有一个褪色,我不想要,如果有一个不是CSS3的解决方案,我想要的.即使在CSS3中有一种方法可以让我知道,只要它不会做渐变渐变.否则,如果任何人有任何有趣的想法,如何提请注意那一个部分,我对所有的想法开放.

解决方法

渐变不一定有褪色,这是一个误解,假设你希望你的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,transparent 100%);
    background-image: -webkit-linear-gradient(top,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);  
}

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

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

原文地址：https://www.jb51.cc/css/216562.html