Here, “left”, “right”, “bottom”, and “top” are all set to “0”.
#TEXT ON IMAGE CSS CODE#
Here, the code is the same as in the second example, but we change the background image and use the “opacity” property on a different image. So, we use the “before” pseudo-selector, which we have disused in the previous example. We are going to insert the background image in the CSS code. In this code, we create three paragraphs inside the div class, and the div class we have created is named “imageOpc”. But the text on the image appears in the original color.
Here, the background image does not appear in its original color as we have set the image’s opacity in the CSS code. The color of the second heading is “black”. The size of this heading is “25px”, and the “line-height” is “0.9”. The heading “position” we set is “relative”.
Then the “top”, “bottom”, “left”, and “right” are all “0px”. The “background-size” sets the image of the background to “cover”, and its “position” is “absolute”. We put “content”, set the “background-image” using the “URL”, and put the name of the image in this URL. The “:: before” is the “pseudo-selector” used for placing the background image before the selected element. The display for this div class “hero” is “flex”, item in the “center”, and “justify-content” to the “center”. The position of the div class “hero” is “relative”, its height is “90vh”, and its width is “90%”. We will add the background image in the CSS code given below. We have “h1” and “h2” in the div class named “hero” in this code. This file defines two headings in the “div” class. But this time, we added the image using CSS properties. Example # 2īy changing the previous HTML code, we created another example. In this manner, we can change the image’s opacity without affecting the text. However, there is no effect on the text written on the image. You can see that the image on the background is not in its original color because we use “0.4” opacity on this background image. We are using “black” as the color of the font. Next, we design our text as we align it in the “center” and set its “font-family” to “Algerian”. The “width” we set here is “100%” for the background image, and “height” is “auto”. The “left” and “top” are both set to “0”. We are setting the background image “position” to “absolute”. We use “img-bg”, which is the name of the image class, and set the image’s opacity as “0.4”. The background image opacity doesn’t change the opacity of the text. In the given CSS code, we are changing the opacity of the background image, but the text heading which we write on this image remains the same. And, in the second div, we have a heading “h1” and type a heading in this “div”. We also have another “div” inside the first div, and the name of this div is “text”.
Here, we set the “scenery.jpg” image as the background image. Now, we have to set the image on the background, so we use “background-img src” and put the name of the image we want to display as the background image. We create a “div” class “demo-wrap” using an image tag. After completing our code, we save it, and the “.html” file extension automatically generates this file name.
#TEXT ON IMAGE CSS SOFTWARE#
So, we open the new file in this software and select the language “HTML”, and an HTML file is created. We are using the visual studio code for doing these examples. To change the background image opacity without affecting the text, we must write some HTML code and change the opacity in the CSS code. We will explore different examples of changing the background image opacity, but the text remains the same. Here, in this guide, we will change the opacity of the background image in CSS without affecting the text using the CSS properties. We will use the “0.0” value for the “fully transparent” color and “1.0” for the “full opaque” color. We can change the value of opacity of the background image in CSS by using the opacity property and changing the alpha value.
We will use the “opacity” property to set the opacity of the background image and use the alpha-value, which defines the opacity of the background image in “RGBA”. In CSS, the background image opacity is defined as the “transparency” of the background image.
0 kommentar(er)
