Copyright notice: This article is the blogger’s original article, shall not be reproduced without the permission of the blogger. Please contact the author by leaving a comment at the bottom of the article.

The background,

Sometimes we need to deal with some image preview, and then show the image thumbnail in a list of images. What if the image is PNG format, the background is transparent but the pattern is white, so it is hard to see?

We have seen some images displayed like this when the browser opens the control preview link, and we will explain in detail how to display this transparent background effect.

Second, the implementation

Here, the background-image, background-position and background-size attributes in CSS are mainly used to achieve this, and the nuggets logo is taken as an example to make a comparison effect picture:

1.background-image

The background-image property can be set to one or more background images, with multiple values separated by commas to specify multiple background images.

2.linear-gradient

We use Linear-gradient to create an image that represents a linear gradient of two or more colors.

/* The above two attributes demo*/
.bg-img{
    background-image:
      linear-gradient(to bottom, rgba(255.255.0.0.5), rgba(0.0.255.0.5)),
      url('https://mdn.mozillademos.org/files/7693/catfront.png');
}
Copy the code

To get an idea of the linear-gradient property, refer to the MDN document Linear-gradient:

/* The gradient axis is 45 degrees, from blue to red */
linear-gradient(45deg, blue, red);

/* From bottom right to top left, from blue to red */
linear-gradient(to left top, blue, red);

/* From bottom to top, the gradient starts with blue, starts with green at 40% of the height, and ends with red */
linear-gradient(0deg, blue, green 40%, red);
Copy the code

3. Realize the effect drawing

Based on the previous familiarity with background-image and Linear-gradient properties, we can implement it.

1. First we have to uselinear-gradientCreate two images

/* The first layer: grey gradient from 45 degrees to 25%, transparent from 0 to 75%, grey from 0 to end, so that there is a clear separation line */
linear-gradient(45deg.#eee 25%, transparent 0, transparent 75%.#eee 0.#eee)
Copy the code

The white part in the middle, seen here, is actually transparent:

# FFF */ # FFF */
linear-gradient(45deg.#eee 25%, red 0, red 75%.#eee 0.#eee)
Copy the code

2. Add them together to see the effect:

background-image: 
    linear-gradient(45deg.#eee 25%, transparent 0, transparent 75%.#eee 0.#eee),
    linear-gradient(45deg.#eee 25%, red 0, red 75%.#eee 0.#eee);
Copy the code

Set 3.background-size

Make the image in the image above 20px by 20px and spread it all over the area

background-size: 20px 20px;
Copy the code

4. Set the background – position

Set the initial position for each image, because each image is 20px in size, and the position offset is half the image size, which is 10px

background-position: 0 0.10px 10px;
Copy the code

Note:

Here you can see that background-position is separated by a comma between the two values, which actually represents the initial positions corresponding to the two images of the background-image set above.

As you can see in the picture below:

  • Change the first layer transparent area from transparent toRgba (0, 0, 5), so you can see the effect of the two images superimposed. The first layer image displacementbackground-position: 0 0.
  • The second layer of red graph displacementbackground-position: 5px 5px;The effect of stacking.

Then change the black shadow to transparent, you can see the effect of four squares:

Let’s put each of these tiling globally and switch colors to see the final result.

5. Replace red with white, resulting in:

background-size: 20px 20px;
background-position: 0 0.10px 10px;
background-image: 
    linear-gradient(45deg.#eee 25%,transparent 0,transparent 75%.#eee 0.#eee),
    linear-gradient(45deg.#eee 25%.#fff 0.#fff 75%.#eee 0.#eee);
Copy the code

Please check the above code demo

reference

  • background-image
  • background-position
  • background-size
  • linear-gradient