CSS全屏背景漸變是一種很酷炫的效果,它可以讓網站更加美觀,給人帶來更好的視覺體驗。下面將介紹如何通過CSS實現全屏背景漸變效果。
html,body{ height: 100%; } .gradient-bg{ background: linear-gradient(to bottom, #ff9900, #ff3300); /* IE10+ */ background: -ms-linear-gradient(to bottom, #ff9900, #ff3300); /* Firefox */ background: -moz-linear-gradient(to bottom, #ff9900, #ff3300); /* Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom, #ff9900, #ff3300); /* Opera 11.1-12 */ background: -o-linear-gradient(to bottom, #ff9900, #ff3300); }
代碼中我們先設置html和body的高度為100%,這樣才能讓漸變背景充滿整個屏幕。接著定義一個名為"gradient-bg"的class來實現漸變效果。background屬性是設置背景顏色的屬性,我們這里用的是線性漸變,表示從上往下漸變,顏色從#ff9900漸變到#ff3300。
值得注意的是,我們還需要加上瀏覽器前綴,因為不同的瀏覽器漸變實現方式不同,為了兼容不同瀏覽器,必須添加瀏覽器前綴。
最后,在HTML中加上下面的代碼,即可實現全屏漸變背景:
這樣,我們就實現了CSS全屏背景漸變的效果。