如何使背景从顶部和底部略微褪色？
[英]How to make background SLIGHTLY fade from top and bottom?
问题描述
I've been trying to slightly fade the top and bottom of my <div> 's background, but every time it ends up fading almost till the middle which is not what I want. 
我一直在尝试稍微淡化<div>背景的顶部和底部，但是每次它最终逐渐消失到中间时，这并不是我想要的。
I'd like to mush the border of the two <div> s. 我想粘贴两个<div>的边界。
background: linear-gradient(white, #c3faec, white);
Have used this and tried to change the % on both colour without success. 使用此方法并尝试更改两种颜色的％均未成功。
4 个解决方案
解决方案1
3 2019-04-08 08:40:06
Set explicit distances for each colour to start and stop, then set your middle colour in two positions to make it solid for that area. 为每种颜色设置显式的距离以开始和停止，然后将中间颜色设置在两个位置，以使该颜色对于该区域稳定。
div { height: 90vh; margin: 5vh; background: linear-gradient(white 0%, red 10%, red 90%, white 100%); }
<div></div>
解决方案2
2 已采纳 2019-04-08 08:36:37
You can create two CSS pseudo elements and configure the gradients independently with the element's height and colour gradient stops. 您可以创建两个CSS伪元素，并使用元素的高度和颜色渐变停止点独立配置渐变。
Example: https://codepen.io/giumagnani/pen/ZZpmje 例如： https ： //codepen.io/giumagnani/pen/ZZpmje
div {
margin: 100px 0;
background: #2222ff;
height: 600px;
position: relative;
}
div::after {
position: absolute;
content: "";
height: 30%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(white 0%, transparent 100%);
}
div::before {
position: absolute;
content: "";
height: 30%;
width: 100%;
bottom: 0;
left: 0;
background: linear-gradient(transparent 0%, white 100%);
}
解决方案3
1 2019-04-08 09:55:06
You can add the direction too in the gradient property. 您也可以在渐变属性中添加方向。 Hope this works. 希望这行得通。
div { height:100vh; background: linear-gradient(to bottom,white, #c3faec, white); }
<div></div>
解决方案4
0 2019-04-08 08:39:57
You can make background slightly fade from top and bottom by this code of css 您可以通过此CSS代码使背景从顶部和底部略微褪色
body { background-repeat: no-repeat; background-attachment: fixed; background-image: linear-gradient(white 10%, black 80%, white 10%); }
<html> <head> <title> "your title" </title> </head> <body> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.