如何在 CSS 中建立雙色分割背景？

CSS：設定視窗的50% 的背景顏色

嘗試在頁面上實現「分成兩半」；相對面有兩半」；相對面有兩半種顏色？幸運的是，有多種方法可以實現此效果，具體取決於您的瀏覽器支援要求。

舊版瀏覽器支援

如果必須支援舊版瀏覽器，您需要使用額外的固定 div 來填充一半螢幕並設定其背景顏色。

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

現代瀏覽器

如果較新的瀏覽器是您唯一關心的，您還有更多選項：

線性漸變：

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

多重背景背景大小：

<pre class="brush:php;toolbar:false">height: 100%;
background-color: cyan;

}

身體 {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;

}
pre>

不要忘記將兩者的高度設定為100% html 和body元素以確保背景覆蓋整個視窗。

以上是如何在 CSS 中建立雙色分割背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！