[英]How to make background SLIGHTLY fade from top and bottom?
我一直在尝试稍微淡化<div>
背景的顶部和底部,但是每次它最终逐渐消失到中间时,这并不是我想要的。
我想粘贴两个<div>
的边界。
background: linear-gradient(white, #c3faec, white);
使用此方法并尝试更改两种颜色的%均未成功。
为每种颜色设置显式的距离以开始和停止,然后将中间颜色设置在两个位置,以使该颜色对于该区域稳定。
div { height: 90vh; margin: 5vh; background: linear-gradient(white 0%, red 10%, red 90%, white 100%); }
<div></div>
您可以创建两个CSS伪元素,并使用元素的高度和颜色渐变停止点独立配置渐变。
例如: 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%);
}
您也可以在渐变属性中添加方向。 希望这行得通。
div { height:100vh; background: linear-gradient(to bottom,white, #c3faec, white); }
<div></div>
您可以通过此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.