1、渐变背景色-000012-01-渐变色背景-格式-001
html样式表
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
/*背景及色值表*/
body {
background-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(#);
/*background: #81a779;*/
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</html>
css
body {
background-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(#);
/*background: #81a779;*/
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
2、渐变背景色-000012-01-渐变色背景-格式-002
html样式表
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
/*背景及色值表*/
body {background-image: linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%);
-webkit-background-image: linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%);
background-size: 100% 100%; -moz-background-size: 100% 100%;background-repeat: no-repeat; background-attachment: fixed;}
</style>
</html>
css
body {background-image: linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%);
-webkit-background-image: linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%);
background-size: 100% 100%; -moz-background-size: 100% 100%;background-repeat: no-repeat; background-attachment: fixed;}
——–html–样式表————
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
/*背景及色值表*/
注释---------这里填写css样式---------------
</style>
</html>
背景渐变色-css-
附网站:1、https://webgradients.com/
附网站:2、https://webkul.github.io/coolhue/
附网站:3、https://uigradients.com
附网站:4、https://gradient.shapefactory.co/
——–html–样式表————
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body{
/* 主页渐变色背景 */
注释:---------------这里填写css-----------------
/* background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); */
}
</style>
</head>
1、渐变背景色-000012-02-渐变色背景-格式-043
html样式表
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body{
/* 主页渐变色背景 */
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
/* background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); */
}
</style>
</head>
css
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);