Within my div, I have an a tag.
I applied opacity:0.5 to the div, causing the text inside to also appear at 0.5 opacity.
I am looking for a way to have the text display with opacity:1 inside my div that has an overall opacity of 0.5, without resorting to using a background image. How can this be achieved?
To create a semi-transparent background, use the rgba function for setting the parent's background color with alpha transparency. For example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
While this code adjusts the background opacity of the container, it does not affect the children elements. To change the children's opacity, you need to define another class with specific opacity values like this:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
If you prefer using a background image, adjust the opacity directly on the image itself (using a PNG format).
Unfortunately, it is not possible to have a child element with higher opacity than its parent in the HTML rendering model.
As stated in the documentation:
Opacity works as a postprocessing operation where the element (including its descendants) is rendered into an offscreen image in RGBA format, and then blended back onto the current composite rendering based on the specified opacity setting.
To work around this limitation, you will need to position your child div outside of its parent using a different type of positioning.
Switch it up by using a completely new <div> element for the content.
<div id="wrapperDiv">
<div id="containerDiv">
</div>
<div id="textDiv">
Hi there
</div>
</div>
CSS Styles
#wrapperDiv
{
position:relative;
}
#textDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#containerDiv
{
width:100px;
height:100px;
opacity:0.5;
}
Take a look at the demo here: http://jsfiddle.net/AliBassam/aH9HC/. I included background colors to highlight the outcome.
By requiring the use of absolute positioning, I want to ensure you have no trouble with aligning the text accurately, so perform some calculations for optimal positioning:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
Opacity can be inherited by the a tag from its parent div. To achieve this effect, you can set the rgba CSS property on the parent div as rgba(0, 0, 0, 0.5) and then apply the same rgba property to the a tag as rgba(255, 0, 0, 1.0).
In line with the previous response, it is advisable to create an additional div specifically for the text content, placed in absolute position over the solid div. Also, consider assigning a high z-index value for proper layering.
Caution: This strategy is effective only if you desire the outer element to be entirely see-through.
Instead of utilizing opacity: 0 and opacity: 1, consider using visibility: hidden and visibility: visible
This approach worked for me (it may not be successful in your case, but it's worth a try) :)
When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? https://i.sstatic.net/MsX1a.png ...
I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...
As I delved into the material-ui documentation, I came across an interesting snippet: Various components in Material-UI make use of z-index, a crucial CSS property that aids in organizing content along a third axis. Material-UI employs a predefined z-in ...
I am attempting to create a div that will overlay an image on hover with a slide up and slide down effect. Can anyone provide guidance on how to achieve this without relying on jQuery? I would prefer to utilize only AngularJS in my application. Here is a ...
I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript. $(function() { changeWidth(500); function changeWidth(menuWidth){ var menuItems = $('#menu l ...
Currently working on a basic 2 column layout design for a website, but ran into a hiccup. Whenever I try adding padding to the left-floated column, it ends up expanding beyond the width that I have set. Unfortunately, I haven't been able to find a sol ...
I've been struggling to reduce the size of my hamburger menu (both height and width) for some time now. I managed to make it a bit smaller, but I can't seem to figure out how to shrink it further. Additionally, I'm having trouble creating a ...
I am facing an issue with 2 scrolling divs (outlined in red) that refuse to scroll to the bottom. I cannot seem to pinpoint what needs to be adjusted to resolve this problem. The thick outlined box represents a simulated browser window. View the code her ...
When using an AJAX request to load a portion of a webpage, the content is delivered by a framework and then inserted into the DOM tree using jQuery. Everything seems to be working well so far. However, I encountered an issue when trying to use background ...
I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...
After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position a ...
One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...
I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...
I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar... Here is my code: document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.ons ...
When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...
Having an issue with CSS in Windows Notepad: <!DOCTYPE html> <html> <head> <title>UniqueScience</title> <style> #title { display: block; ...
Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...
I'm currently developing a board game in JavaScript, and I have stored the images for the board within a table structure. Initially, I used HTML <table> tags for this purpose. However, I later realized that since the table doesn't contain d ...
Lately, I've been working on incorporating a footer into my layout.html file that is inherited by all other pages within my Django project. I am aiming to create a footer that remains fixed at the bottom of every webpage just like how Stack Overflow ...
Check out my website at: This section discusses: At the bottom of the image, a 'gap' appears. Instead of using standard HTML img tags, I used Next.js Image like this: <Image src="https://ticket-t01.s3.eu-central-1.amazonaws.com ...