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) :)
Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...
I have a question about a particular scenario. I have a div element that is styled like a ball and I want it to transition diagonally across the page to the bottom right corner instead of moving suddenly. However, this is not happening as expected. Can you ...
I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...
Having some difficulty figuring this out. I'm working on a bootstrap navbar that transitions from static to fixed when the user scrolls past the logo at the top. Everything seems to be working fine, except for when the navbar reaches the top, it sudde ...
As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...
Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...
In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...
I'm currently working on a project that has the following file structure: However, I am facing issues with loading my CSS and JS files... <link rel="stylesheet" href="./css/main.css"> <script src="./js/main.js" ...
Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...
Just as the title suggests, I have an external style sheet connected to my HTML document, and it appears that the footer element may be incorporating the changes, but none of the other content is. Being new to this, I'm trying to pinpoint where I went ...
Greetings if this question has already been inquired about, but my search turned up nothing quite like it. My current setup is as follows: .main{ display: inline-flex; flex-direction: row; } <div class = "main"> <div class="sub-div ...
I need to download and display a large image in an img tag. Since the image is not Progressive JPEG, it will render as it downloads. Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML p ...
Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...
I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...
Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...
Encountering an issue here. I have 4 HTML elements structured like this: <!-- Light Color Scheme - Header False and Show Faces True --> <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptiv ...
I need to showcase my dynamic data from a database in a specific format that can accommodate anywhere from one to five variables. How can I effectively display and present the data using HTML and CSS? I've attempted using div and span elements, but t ...
I've created a simple code for experimentation purposes: <!doctype html> <html lang='en'> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" ty ...
Hey there! I'm having a little trouble trying to increase the size of my radio button using this CSS code. It seems to work in Mozilla, but not in Chrome. .rdo { margin: 1em 1em 1em 0; transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -ms- ...
Here is the code snippet I am working with: <a onclick="lel($(this),'212345555')" class="button"> <a onclick="lel($(this),'241214370')" class="button"> <a onclick="lel($(this),'248916550')" class="button"> & ...