像這樣的背景與紅色和黃色相同的高度。如何使用平坦顏色的CSS漸變製作背景?
回答
使用Colorzilla的gradient generator,只需設置兩種顏色相同%的位置,你會得到兩種顏色之間的硬邊。
background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */
這似乎不適用於Chrome中的大高度。 http://codepen.io/codecarson/pen/umesI – manafire
Colorzilla的梯度發生器是一個不錯的開始,但代碼在我看來是糟糕的。
你永遠不會很容易地看到顏色是否正確,沒有像#ff0
這樣的短十六進制代碼輸出 - 與上述答案相比,最重要的是W3C標準已更改爲to <side-or-corner>
。
因此,與相同高度紅色和黃色區域時給定的平坦梯度後,你的問題,這是我的首選代碼:
background-color: #ff0; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff0), color-stop(50%, #ff0), color-stop(50%, #fe0000)); /* Chrome, Safari4+ */
background-image: -webkit-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Chrome10+, Safari5.1+ */
background-image: -moz-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Fx3.6+ */
background-image: linear-gradient( #ff0 50%, #ff0 50%, #fe0000 50%); /* W3C */
另外請注意,在這種情況下,您可以省略IE不推薦使用的filter
屬性,只是因爲沒有包含色塊。
如果您知道包裝盒的確切高度,則也可以使用px
值而不是用於色塊的%
值。
更新2016年1月16日:既不-o-
廠商前綴是必要的,也不-ms-
(如IE 10是第一IE以支持梯度和它支持的W3C標準語法)。見http://caniuse.com/#feat=css-gradients
更新2016-01-27:更喜歡lowercase hex color values for better gzipping,並且清楚地指出background-color
和background-image
而不是background
。也刪除了to bottom
,因爲它是默認值。
- 1. 顏色漸變的背景
- 2. 僅使用CSS水平製作背景顏色重複使用
- 3. 如何停止重複自身的背景顏色漸變? (css)
- 4. 用顏色製作顏色漸變:
- 5. CSS漸變背景顏色不工作,變成灰色的表頭
- 6. IE11漸變顏色在背景
- 7. 在背景顏色上應用漸變CSS
- 8. 如何製作背景漸變
- 9. 用顏色漸變更改背景顏色
- 10. CSS漸變背景不縮放,以一種顏色結束
- 11. Android:使用seekbar逐漸改變多個imageview背景的顏色
- 12. 爲uibutton背景圖像設置漸變顏色(顏色)iphone sdk
- 13. 將導航欄顏色混合到背景顏色(漸變?)
- 14. 如何改變背景顏色和背景顏色?
- 15. 使用CSS漸變背景滾動
- 16. CSS:懸停改變的背景 - 顏色
- 17. 如何讓背景逐漸變色?
- 18. R:ggplot背景漸變着色
- 19. CSS:背景顏色的背景圖像
- 20. CSS背景漸變驗證
- 21. CSS HTML背景漸變
- 22. css垂直漸變背景
- 23. CSS過渡背景漸變
- 24. CSS漸變到純背景
- 25. iOS UITableView:使用CAGradientLayer將背景顏色設置爲漸變
- 26. LibGdx平滑背景顏色變化
- 27. 使背景顏色變淺
- 28. 如何在svg背景中創建漸變顏色
- 29. 如何漸變顏色添加到背景DIV
- 30. div的CSS背景顏色
查看示例[此處](http://compass-style.org/examples/compass/css3/gradient/) –