CSS漸變背景色是一種在網頁設計中經常使用的技術,可以帶來豐富的視覺效果。下面我們來學習一下如何用CSS設置漸變背景色。
/* 線性漸變 */ background: linear-gradient(to right, #ff0000, #0000ff); /* 徑向漸變 */ background: radial-gradient(circle, #ff0000, #0000ff); /* 漸變方向角度 */ background: linear-gradient(45deg, #ff0000, #0000ff); /* 雙向漸變 */ background: linear-gradient(to top, #ff8080 0%, #ff8080 50%, #0000ff 50%, #0000ff 100%); /* 重復漸變 */ background: repeating-linear-gradient(to right, #ff0000, #0000ff); /* 紋理漸變 */ background: url(texture.png) repeat, linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
上面是常見的一些CSS漸變背景色代碼,其中linear-gradient表示線性漸變,radial-gradient表示徑向漸變。括號里的參數表示漸變的方向、顏色等。這些代碼可以根據需要進行自由組合,創造出各種奇妙的背景效果。
上一篇div css知識點