Un backgrond come questo con la stessa altezza di rosso e giallo.Come creare uno sfondo usando il gradiente CSS con un colore piatto?
risposta
Utilizzo di ColorZilla gradient generator, è sufficiente impostare due colori nella stessa posizione% e si otterrà un bordo duro tra i due colori.
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 */
Questo non sembra funzionare per grandi altezze in Chrome. http://codepen.io/codecarson/pen/umesI – manafire
Il generatore di gradazioni di Colorzilla è un buon inizio, ma il codice è terribile secondo me.
Non vedrai mai facilmente se i colori sono corretti, non c'è uscita di codici esadecimali corti come #ff0
e, cosa più importante rispetto alla risposta sopra, lo standard W3C è stato modificato in to <side-or-corner>
.
Quindi dato la tua domanda dopo un gradiente piatto con stessa altezza dell'area di rosso e giallo questo è il mio codice preferito:
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 */
Si noti inoltre che è possibile tralasciare la deprecata proprietà filter
per IE in questo caso, semplicemente perché non sono presenti arresti colore.
Se si conosce l'altezza esatta della scatola, è anche possibile utilizzare i valori px
invece dei valori %
per gli arresti colore.
Aggiornamento 2016/01/16: Né -o-
prefisso venditore è necessario, né -ms-
(IE 10 è il primo IE per sostenere gradienti e supporta gli standard W3C sintassi). Vedere http://caniuse.com/#feat=css-gradients
Aggiornamento 2016-01-27: Preferire lowercase hex color values for better gzipping e indicare chiaramente background-color
e background-image
anziché background
. Anche rimosso to bottom
in quanto è il valore predefinito.
- 1. Come creare uno sfondo circolare usando i CSS?
- 2. Come scurire uno sfondo usando i CSS?
- 3. Gradiente di sfondo CSS con offset
- 4. Come faccio a creare uno sfondo triangolare con puro css
- 5. Come creare uno stile piatto combobox WPF?
- 6. Gradiente SVG con CSS
- 7. Come rendere JButton con uno stile semplice e piatto?
- 8. Il colore gradiente CSS si arresta dalla fine in pixel
- 9. gradiente di sfondo con tinta unita
- 10. iOS UITableView: assegna il colore di sfondo come gradiente usando CAGradientLayer
- 11. Colore di sfondo CSS trasparente
- 12. transizione css sul gradiente dell'immagine di sfondo
- 13. Android creare un "bottone piatto"
- 14. colore di sfondo CSS con elementi galleggianti
- 15. Cosa significa un asterisco prima del colore di sfondo CSS?
- 16. come impostare il colore di sfondo dell'intera pagina in css
- 17. Il modo più semplice per creare un gradiente di colore su excel usando python/panda?
- 18. Come rendere trasparente il colore di sfondo div nei CSS
- 19. gradiente di testo css
- 20. CSS - colore di sfondo incluso margine
- 21. Posso applicare il gradiente webkit a un bordo o solo uno sfondo?
- 22. Come posso creare uno sfondo sfumato orizzontale per la mia barra di navigazione iOS?
- 23. Stampa bootstrap Il CSS rimuove il colore di sfondo
- 24. CSS RGBA colore di sfondo di convalida
- 25. Gradiente con dissolvenza in CSS
- 26. Come creare una forma d'onda usando css
- 27. Android: come creare uno sfondo dal motivo?
- 28. Come creare un bordo trasparente usando i CSS?
- 29. Come creare un Drawable con il colore di sfondo necessario a livello di programmazione?
- 30. css stampa il colore di sfondo nell'ultima pagina
controllare gli esempi [qui] (http://compass-style.org/examples/compass/css3/gradient/) –