HTML background color gradient effect achieved through CSS style

Effect screenshots:

Implementation code:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
background:-moz-linear-gradient(top,#15A216,#fafafa);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*Google*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

Call js function or js variable in html's img src="" to dynamically specify the image path

Blog

HTML background color gradient effect achieved through CSS style

Detailed explanation of grep and egrep commands in Linux

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

Specific use of MySQL window functions

Detailed explanation of the role and principle of key in Vue

Call js function or js variable in html's img src="" to dynamically specify the image path

Detailed explanation of Linx awk introductory tutorial

Solve the problem that the repository and tag names are both none after Docker loads a new image

JS 9 Promise Interview Questions

MySQL 8.0.18 adds users to the database and grants permissions

Enable remote access rights for MySQL under Linux and open port 3306 in the firewall

Recommend

How to configure Tomcat and run your first Java Web project on IntelliJ IDEA 2018

CSS and HTML and front-end technology layer diagram

Complete steps to enable gzip compression in nginx

How to add shortcut commands in Xshell

Example of how to implement value transfer between WeChat mini program pages

Docker-compose tutorial installation and quick start

Solve the problem of Tomcat10 Catalina log garbled characters

Website performance: Image and Cookie optimization and mobile application optimization

In-depth understanding of javascript prototype and prototype chain

Don’t bother with JavaScript if you can do it with CSS

Example code of setting label style using CSS selector

Talking about the practical application of html mailto (email)

Detailed explanation of styles in uni-app

Display special symbols in HTML (with special character correspondence table)

MySQL 5.7.12 installation and configuration tutorial under Mac OS 10.11