CSS 漸變方向僅一節

Question

我有一個看起來像這樣的 css 漸變

我用於此的代碼如下

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

如您所見，左側 50% 由單色組成，右側 50% 具有從左到右的漸變。 我想讓正確的漸變從下到上流動。 我怎樣才能做到這一點？

Answer 1

默認情況下，從上到下應用漸變，在 class 中，您將 90 度旋轉歸因於漸變，通過將度數修改為 180，它會導致從下到上漸變。

background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

請參閱此處了解更多信息

Answer 2

為此，您必須對此類要求使用偽選擇器，它非常適合您。 根據您的要求，您不可能想要垂直漸變並且寬度的前 50% 是正常顏色，為此我們將漸變應用到頁面的整個寬度，然后使用偽選擇器覆蓋左側 50% 寬度:before以獲得更多理解按照片段代碼。

 .bg_container { position: relative; background: rgb(2,0,36); background: linear-gradient(0deg, rgba(231,244,249,1) 0%, rgba(255,255,255,1) 100%); }.bg_container:before { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: rgba(243,249,252,1); z-index: 0; content: ""; }.page_content{ position: relative; }

 <div class="bg_container" style="height: 400px;"> <div class="page_content"> hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii </div> </div>

將高度應用於 div 只是例如它取決於您的頁面內容。

我希望這段代碼對你有幫助。

謝謝你...

Answer 3

我嘗試了 2 種方法，最適合您使用。

 #grad1 { background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(0deg, red 30%, blue 70%); position: relative; z-index: 0; padding: 15px; } /*********************/ #grad2 { position: relative; z-index: 0; padding: 15px; } p { color: white; } #grad2:before { content: ""; background: linear-gradient(0deg, red 30%, blue 70%); position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1; } #grad2:after { content: ""; background: linear-gradient(90deg, red 30%, green 70%); position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: -1; }

 <div id="grad1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <br> <br> <div id="grad2"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>

謝謝 ！

Answer 4

您需要考慮多個背景層，使頂部（單色層）僅占寬度的50%並將其放在左側：

 html { height:100%; background: linear-gradient(rgba(243,249,252,1),rgba(243,249,252,1)) left/50% 100%, linear-gradient(to top, rgba(231,244,249,1), rgba(255,255,255,1) ); background-repeat:no-repeat; }