在css中,可以利用「background-image」屬性和「linear-gradient()」函數實作元素背景線性漸變,語法為「元素{background-image:linear-gradient(漸變方向,顏色1,顏色2..)」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3怎麼實作背景線性漸變
#在css中想要實作元素背景線性漸變,需要利用background-image屬性。
background-image屬性用於設定元素的背景樣式,當屬性與linear-gradient()函數配合使用時,就能夠設定元素背景為線性漸變樣式。
linear-gradient() 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。
建立一個線性漸變,需要指定兩種顏色,還可以實現不同方向(指定為一個角度)的漸變效果,如果不指定方向,預設從上到下漸變。
範例如下:
<html> <head> <meta charset="utf-8"> <title>123</title> <style> #grad1 { height: 300px; background-image: linear-gradient(red, yellow ,red); } </style> </head> <body> <p>从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:</p> <div id="grad1"></div> </body> </html>
輸出結果:
#(學習影片分享:css影片教學)
以上是css3怎麼實現背景線性漸變的詳細內容。更多資訊請關注PHP中文網其他相關文章!