33

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

所以我想做的是为顶部设置颜色以引起人们注意这是您要求的结果；对我来说最好的办法是让它识别您单击的内容并设置背景颜色，但我不知道该怎么做，或者编写 java 所以如果我能得到任何帮助会很好。

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

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

4

4 回答 4

61

渐变不一定有淡入淡出，这是一种误解，假设您希望您的 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/

于 2013-06-27T21:31:02.837 回答
6

作为已接受答案的更新：

.only-start{
  background: linear-gradient(
    to right,
    red,
    red 1rem,
    transparent 1rem,
    transparent 100%
  );
}
于 2019-07-16T08:32:20.843 回答
2

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

注意：如果有人认为这个'comment-ish' - 我可以移动它。

于 2013-06-27T22:59:13.540 回答
1

您可以使用带有颜色百分比的渐变。

#gradbox {
  height: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}
<div id="gradbox"></div>

于 2020-07-18T04:47:25.070 回答