Html 我只想为我的 div 的一部分添加背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17353449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to add a background color only to part of my div
提问by Rodney Maspoch
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-gradientin 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 是移动的东西，所以我使用linear-gradientCSS3将颜色设置为页面的顶部百分比，但是当您单击另一个菜单项时它会移动，因为 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 中有一种方法可以做到这一点，只要它不会进行渐变淡入淡出，请告诉我。否则，如果有人对如何引起人们对该部分的关注有任何绝妙的想法，我愿意接受所有想法。
回答by Raj Nathani
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/
回答by lloan
Rodney - You can use Colorzillato 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.
注意：如果有人认为这是“评论式” - 我可以移动它。
回答by mattinsalto
As an update to the accepted answer:
作为对已接受答案的更新：
.only-start{
background: linear-gradient(
to right,
red,
red 1rem,
transparent 1rem,
transparent 100%
);
}
