將文字置於兩種不同的純色背景色之上

Question

有誰知道如何將文字置於兩種不同的純色背景色之上嗎？同時，在最小化屏幕時它仍然是響應式的。我已經看到這種做法很多，但是，我仍在研究編碼這種風格的標準方法。下面我添加了我想要做的風格的圖像。感謝您的時間。

Answer 1

我仍然認爲CSS漸變是要走的路。如果需要，您可以設置停止位置。它也不依賴於設置高度。

div { 
 
    background-image: linear-gradient(to bottom, #ee615f, #ee615f 50%, #9f3e3e 50%, #9f3e3e); 
 
    font-family: sans-serif; 
 
    font-size: 40px; 
 
    line-height: 1; 
 
    padding: 25px 0; 
 
    margin-bottom: 25px; 
 
    text-align: center; 
 
} 
 

 
#div2 { 
 
    background-image: linear-gradient(to bottom, #ee615f, #ee615f 25%, #9f3e3e 25%, #9f3e3e); 
 
} 
 

 
#div3 { 
 
    background-image: linear-gradient(to bottom, #ee615f, #ee615f 75%, #9f3e3e 75%, #9f3e3e); 
 
}

<div id="div">COLOR STOP AT 50%</div> 
 

 
<div id="div2">COLOR STOP AT 25%</div> 
 

 
<div id="div3">COLOR STOP AT 75%</div>

下面是使用它們的詳細信息：https://css-tricks.com/css3-gradients/

Answer 2

這可以幫助你。 https://jsfiddle.net/67uxvnq7/1/

.div1 { 
 
    position: relative; 
 
    width: 100%; 
 
    height:50vh; 
 
    background: pink; 
 
} 
 

 
.div2 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 50vh; 
 
    background: red; 
 
} 
 

 
span { 
 
    font-size: 50px; 
 
    font-weight:bold; 
 
    color: #000; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    z-index:1; 
 
    width:100%; 
 
    text-align:center; 
 
}

<div class="div1"> 
 
    <span>HELLO WORLD</span> 
 
</div> 
 
<div class="div2"> 
 

 
</div>