有誰知道如何將文字置於兩種不同的純色背景色之上嗎?同時,在最小化屏幕時它仍然是響應式的。我已經看到這種做法很多,但是,我仍在研究編碼這種風格的標準方法。下面我添加了我想要做的風格的圖像。感謝您的時間。將文字置於兩種不同的純色背景色之上
-5
A
回答
0
我仍然認爲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/
0
這可以幫助你。 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>
相關問題
- 1. Pascal - 將背景設置爲白色(不是灰色,純白色)
- 2. 文本的純色背景
- 3. 純白色背景色
- 4. 兩種純色
- 5. 將NavigationBar背景設置爲純色
- 6. 兩種顏色背景
- 7. 將兩種背景顏色應用於文本框。
- 8. 懸停至純色背景?
- 9. Python OpenCV純白色背景
- 10. 如何製作純色背景色
- 11. 通過背景顏色在文字上顯示背景顏色
- 12. 將div的背景顏色的80%設置爲一種顏色
- 13. 兩種顏色的Android佈局背景
- 14. HTML背景的兩種顏色
- 15. 兩種顏色的帶狀背景?
- 16. 哪種顏色應該用作淺色背景上的主要文字顏色?
- 17. 不同的背景顏色
- 18. 兩種背景顏色(水平)
- 19. 黑色背景上的褪色文本
- 20. iOS褪色白色背景上的強烈白色文字?
- 21. UIView.animate不上的背景色
- 22. 深色背景上的淺色文字在Mac上的Firefox上過於粗體
- 23. 爲QGraphicsView小部件設置純色背景色
- 24. 如何使UIView從純色背景色中淡出以清除背景色?
- 25. ListView - 設置不同背景顏色的前兩個項目
- 26. AlertDialog上深色背景上的黑色文字與Theme.Sherlock.Light
- 27. CSS正在轉動背景色不同於原來的色調
- 28. 什麼樣的顏色混合使前景不同於背色?
- 29. 不同的背景顏色在一種模式中使用四種顏色
- 30. 多種背景顏色Fabricjs
互鑑兩種不同顏色的兩個矩形,然後放置在長方形 – Li357
文本你嘗試過什麼?請發佈以前嘗試過的代碼,只是詢問如何在StackOverflow中執行某些操作。 – Velix007
這對於CSS漸變很容易。 https://css-tricks.com/css3-gradients/ – rideron89