如何使背景從頂部和底部略微褪色？
[英]How to make background SLIGHTLY fade from top and bottom?
問題描述
我一直在嘗試稍微淡化<div>背景的頂部和底部，但是每次它最終逐漸消失到中間時，這並不是我想要的。
我想粘貼兩個<div>的邊界。
background: linear-gradient(white, #c3faec, white);
使用此方法並嘗試更改兩種顏色的％均未成功。
4 個解決方案
解決方案1
3 2019-04-08 08:40:06
為每種顏色設置顯式的距離以開始和停止，然后將中間顏色設置在兩個位置，以使該顏色對於該區域穩定。
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
您可以創建兩個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%);
}
解決方案3
1 2019-04-08 09:55:06
您也可以在漸變屬性中添加方向。 希望這行得通。
div { height:100vh; background: linear-gradient(to bottom,white, #c3faec, white); }
<div></div>
解決方案4
0 2019-04-08 08:39:57
您可以通過此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>
如何使div具有背景圖片且沒有內容顯示並從頁面的頂部延伸到底部？
[英]How do I make my div with a background image and no content show and extend from the top to bottom of the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.