如何使用css創建具有四種不同顏色和四種不同位置的背景，如下圖所示，而又不推低html的內容？
uj5u.com熱心網友回復：
您可以使用linear-gradient在不同的點創建不同的顏色。但是，這不會直接按照您希望的方式作業，因為線性漸變僅適用于一個方向。因此，我們必須為左右 50% 創建偽元素：
body {
position: relative;
}
/* for the left 50% of the background */
body::before {
content: "";
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, green 0 25%, white 25% 50%, #50A9B2 50% 75%, white 75% 100%);
z-index: -1;
}
/* for the right 50% of the background */
body::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background: linear-gradient(to bottom, white 0 25%, purple 25% 50%, white 50% 75%, orange 75% 100%);
z-index: -1;
}
/* for styling purpose only */
body {
min-height: 100vh;
margin: 0;
}uj5u.com熱心網友回復：
CSS 中的 background-image 允許您擁有多個影像并分別調整它們的大小和位置。
linear-gradient(acolor,acolor) 會給你一個顏色塊。
因此，將這些想法放在一起，此代碼段僅將位于視口中的 4 種顏色（線性漸變）作為示例。由于它們是背景，因此不會影響任何元素的定位。
html {
width: 100vw;
height: 100vh;
background-image: linear-gradient(green, green), linear-gradient(magenta, magenta), linear-gradient(teal, teal), linear-gradient(orange, orange);
background-size: 50% 25%;
background-position: left top, right 33.333333%, left 66.666666%, right bottom;
background-repeat: no-repeat;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353263.html