對單一div應用多種背景顏色
為了在單一div中實現多種背景顏色,CSS提供了支援線性的bacac kground屬性梯度。以下是如何實現您所描述的場景:
場景1:建立分離顏色的Div (A)
建立具有分離背景的div (類似於影像中的「A」),使用具有四個色標的線性漸變:
div.A { background: linear-gradient( to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100% ); }
場景2:使一個部分小於另一部分 (C)
在「C」場景中,您希望使藍色部分的高度更小。這可以透過使用:after 偽元素和白色背景來實現:
div.C { background: linear-gradient( to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100% ); } div.C:after { content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: 20%; /* Adjust this value to control the height of the blue portion */ background-color: white; }
注意:為了更好的跨瀏覽器相容性,請考慮使用背景屬性的供應商前綴如所提供的程式碼片段中所示。
以上是如何使用 CSS 漸層將多種背景顏色套用到單一 Div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!