操作方法
打开html开发工具，新建一个html文件。如图
在html代码页面创建一个<div>并给这个标签添加一个类如：linear。如图 代码：<div class="linear"></div>
为类设置样式。在<title>后面创建一个<style>标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式。演示中设置的渐变黑白渐变。如图： 代码： <style type="text/css"> .linear{ background-image: linear-gradient(to top, #fff,#000); height: 300px; } </style>
保存好html文件后使用浏览器查看效果。
所有代码。可以直接复制所有代码到新建的html文件保存后使用浏览器打开即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置背景渐变</title> <style type="text/css"> .linear{ background-image: linear-gradient(to top, #fff,#000); height: 300px; } </style> </head> <body> <div class="linear"></div> </body> </html>
方法/步骤2
使用角度来设置渐变。方法基本上都是一样的，唯一不同需要把上面第三个步骤做一些修改。把background-image: linear-gradient(to top, #fff,#000); 修改 background-image: linear-gradient(0deg, #fff,#000); 。如图：
保存好html文件后使用浏览器查看效果。
所有代码。可以直接复制所有代码到新建的html文件保存后使用浏览器打开即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置背景渐变</title> <style type="text/css"> .linear{ background-image: linear-gradient(0deg, #fff,#000); height: 300px; } </style> </head> <body> <div class="linear"></div> </body> </html>
总结：背景渐变的方向可以使用英文也可以使用角度来实现。具体可看图片