The default value of the background-blend-mode property is normal. The background-blend-mode property blends the background-color with the background-image. The property takes values like lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light etc. The background-blend-mode property sets how an element’s background images should blend with the element’s background color. Use the background-blend-mode Property to Overlay Background Image With Gradient in CSS The example below shows that the linear-gradient provides image overlay, which includes two different colors moving from left to right due to the transparency of color used in linear-gradient. It means the left side of the container contains the color rgba(50, 70, 80, 0.7), and gradually the color changes to rgba(30, 20, 150, 0.7) while moving to the right. The to right value inside the linear-gradient indicates the pattern or direction of the color. Here, we have used two colors in linear-gradient with an opacity of 0.7 in each color. Write the rgba(50, 70, 80, 0.7) as the first color stop add rgba(30, 20, 150, 0.7) as the second color stop.Īfter the linear-gradient function, use the url() to insert the image and no-repeat and fixed options for the background image. Next, use the rgba() function, to specify the gradient. Write the linear-gradient property and use the to right direction as the first parameter. Then set linear gradient and background image using background shorthand property. Select the id in CS and set the height and width of the container as 100vh and 100%. After it, we can specify the color stops according to our needs.įor example, create a div with an id main. The first parameter of the linear-gradient function is the direction of the gradient.
However, to use it as an image overlay, we have to use it with the background image.Ĭolors with lower opacity should be linear-gradient to make the background image visible. We can use linear-gradient as background color, and it can also be used as an image overlay. Different colors are mixed up and different directions to create a colorful pattern. Use the linear-gradient Function to Overlay Background Image With Gradient in CSSĪ linear gradient is a CSS function that creates a colorful image of a progressive transition between two or more colors along a straight line. As the div has a transparent background color, the background image is visible. The example below shows that the div with the class name of overlay appears over the main div. Set the overflow property of div to hidden as above. Set the height property to 100% to match the height of its parent element. Give it a background-color along with opacity such that background: rgba(50, 70, 80, 0.7). Next, we must create an overlay by styling the overplay div. Also, set the color to white to make the text more visible.įinally, set the position property to absolute. Set the overflow property to hidden to hide the content overflowing from the container. Next, give the div the height of 100% to adjust its height according to the content. The background-repeat property is no-repeat, and the background-position property is fixed. In CSS, set the background image to the main id such that, background: url("") no-repeat fixed.
Next, create a paragraph p and write some text. Then, create a div inside the header and give it a class overlay. We can create an overlay simply by adding a color above an image, decreasing its opacity.įor example, create a div tag and give it an id main. If the value of opacity is set to 0, then it is completely transparent, and if the value of opacity is set to 1, it will be completely opaque. Here red, green and blue color is set to a value between 0-255 and an opacity ranging from 0-1.
0 kommentar(er)
