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-gradient
Create 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 to
Rgba (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 displacement
background-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