![]() Users can decrease the opacity of colour while using the ‘rgba’ or ‘hsla’ values. Users learned to set the opacity for the background color without affecting the opacity of the text or the div content. ![]() Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element In such a way, we can put the background div below the content div and play with the opacity of the background div. We can set the z-index properties for both div elements to show the content div above the background div.Īfter that, we can decrease the opacity of only the background div using the ‘opacity’ property of CSS. The background and content div dimensions are the same as the parent div. In the parent div, we have background and content div. We can separate the background div from the content div and set the background color for the div element with lower opacity. Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element ![]() Users can increase or decrease the opacity values between 0 to 1 and observe the changes in the background color. Also, we have used the ‘hsla’ values as a background with the ‘0.2’ alpha opacity values. In the example below, we have used the ‘background-color’ CSS property to set the background for the HTML div element. Setting up the background opacity without affecting the content of the div element We have set the ‘red’ color as a background with an opacity ‘of 0.1’, which users can observe in the output. We have used the ‘rgba’ values to set the background color. In the example below, we created the HTML div element and set the background color using the ‘background’ property. Users can set the background color using the ‘rgba’ or ‘hsla’ here ‘a’ represents the alpha opacity which takes a value between 0 and 1. Users can follow the syntax below to set the opacity only to background color not on the text in CSS. We can decrease the background color's opacity by decreasing the alpha variable's value while assigning the color value to the ‘background color’ property. Sometimes, we may require to decrease the background colour's opacity without affecting the HTML element's content. Make sure your section element is positioned relatively so the absolutely positioned content container will stay within its boundaries.In CSS, we can set the background for the particular HTML element using the ‘background’ property of CSS. ![]() Then we create the content box and position it over the background box using position: absolute. We position it where we want on the page, and then create the background box as the same size as its container. If you want to know more, read my tutorial and explanation here.īackground: url(images/bg.gif) scroll repeat īasically we create a box to contain our background and content. This page is just a demo but I've included the source code in a downloadable package here. This is possible by organizing elements on the page to "lay over" on another so they appear to be descendent children but are in fact different levels of elements.įeel free to check out the source code. This background has an opacity of 50%, but the content laid on top of it has an opacity of 100%. To adjust the page layout, simply move the content elements out of the background container and into another container that you’ll float over top of the transparent/translucent background. I’m assuming you have some sort of background container you want to make translucent with content inside being opaque. Adjust the page layout to position elements over each other to create the desired layout effect without inheriting the opacity rule (I generally choose this option).Use the new CSS3 rgba rule, but it’s still relatively new and most of your visitors probably won’t see the changes.This method works well in terms of browser support, but increases loading times and the amount of work a developer would have to do to make changes. png or some other image format with the “alpha” value. The issue of CSS opacity being unwittingly inherited by child elements has come up several times, so below is my workaround.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |