Using CSS to write with texture gradient background map example code

Time:2021-1-23

In the project, the page length is more than 2000px, and the background image is textured and gradient, so it will be very time-consuming to load, so we use CSS instead.

This time we mainly use the website isHero patterns — free online texture material library

在这里插入图片描述

There are many ready-made backgrounds in this website. You can also customize the background color, pattern color and transparency.

在这里插入图片描述

The background color of the website is solid color. If we need gradient background, we can set the background color of the texture to transparent color, and then set the background image of the parent element to gradient effect~


html,body{
  background: #000;
  min-width: 1024px; 
  background-image: linear-gradient(to right, #000 -6%, #703ccc, #000 110%);
}

.Diffuse{
    min-width: 1024px;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.61' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }

All right, we’re done~

在这里插入图片描述

So far, this article about using CSS to write the sample code with texture gradient background is introduced here. For more related content of CSS texture gradient background, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Creating objects with constructors

Why do we use constructors? 1: The common literal method and the new object method can only create one object at a time Most properties and methods are reused. When we want to create multiple objects with the same properties and methods and reuse them, we need to use constructors to create them. 2: Constructor […]