This is an issue where the positioning of CSS divs is causing shadows to interact

There is an issue I am facing while trying to implement the following CSS:

  • Background image - working fine (although not visible in jsfiddle)
  • A shadow created by a background div - also working fine
  • The rest of the elements need to remain sharp without any shadow effects - THIS IS THE ISSUE

The "shadow div" has a fixed display attribute and is not a parent of any other element on the site! I cannot understand why the opacity property affects other elements in the same position?

Here is the shortened HTML code:

<body>
    <div id="background"></div> 
    <div id="bodyBackground"></div>
    <div id="body">elements here look darker</div>
</body>

JsFiddle link Shorter JsFiddle

htmlcss

Answer №1

The reason for this is the opacity setting applied to the content.

#content {
    display: inline-block;
    margin-top: 45px;
    margin-left: 160px;
    padding-bottom: 30px;
    color: white;
    opacity:0.4; <--- specifically here 
    filter:alpha(opacity=40); <--- also here
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the trick to showing text underneath a font awesome icon?

My HTML code contains font awesome icons, and I'm looking to have text appear below each icon instead of next to it. Currently, the text is displayed midway to the right of each icon. <div class="icons"> <span class="fa-stack f ...

htmlcss

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow

What is a simple way to make toggling a .click event more efficient

Currently working on my final project for my webpage development course, I am focusing on creating a blog-themed website. My goal is to implement a feature where clicking on a profile picture expands it into a box displaying a bio and additional informatio ...

javascriptjqueryhtmlcssjquery-animate

Display a paragraph on a webpage based on the user's response being either true or false

I am looking to create an application that consists of 3 questions, each with 2 options: yes and no. Based on the user's response, I want to display a different paragraph. How should I approach this? <!DOCTYPE html> <html> <head> ...

javascripthtmlfunctionbuttonparagraph

Using AJAX POST for real-time validation of usernames and email addresses

Creating a basic form with AJAX and jQuery to validate the username and email address before submitting: <body> <div> <h5> Registration </h5> <hr /> <div> Username: <input type="text" size="32" name="membername" ...

phpjqueryhtmlajax

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

javascripthtmlcssanimation

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

cssreactjstypescriptnext.js

Ways to retrieve the innerHTML of a Script Tag

After spending what feels like an eternity searching, I still can't figure out how to get the innerHTML of a script tag. Here's where I'm at... <script type="text/javascript" src="http://www.google.com" id="externalScript"></script ...

javascripthtmlcross-domaininnerhtml

How can I set a default radio button selection when the page is loaded?

Input your radio button code below: <ion-radio ng-model="data.gender" ng-required="true" ng-value="'male'">Male</ion-radio> <ion-radio ng-model="data.gender" ng-required="true" ng-value="'female'">Female</ion-rad ...

angularjshtml

I prefer to transmit information in HTML format rather than using Excel files

Here is my approach, however the response I am getting is a basic HTML. I attempted to duplicate successful code from method2 inside ExportReportChip() but it seems to not be functioning as expected. public ActionResult SuccessFulMethod(DateTime reference ...

c#html.netexcel

Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far. However, there is an aggravating gap that persists despite my best effort ...

javascriptcssmasonry

Tips for hiding a bootstrap modal in Angular4 when it has no content

I am currently working on an Angular 4 e-commerce application. One of the requirements is to hide a bootstrap modal when there are no products in the cart. When a user selects some products, they are added to the mycart modal screen. The user also has the ...

angularhtmltypescriptbootstrap-4

The alignment of Font Awesome Icons within a Bulma menu is not as expected

Is there a way to properly align font awesome icons with text in a Bulma menu without the need for custom CSS? Icons align correctly in a Bulma navbar item, but appear misaligned in a Bulma menu. https://i.sstatic.net/EpmSe.png <!DOCTYPE html> ...

htmlcssfont-awesomebulma

Use this jQuery-animated menu to make hyperlinks hover with style!

Currently immersed in my exam project, I have integrated an animated jQuery navigation. I am aiming to set the text color to white when hovering over both the link itself and the menu icon that appears upon hovering over the <li> elements. Despite ...

javascriptjqueryhtmlcssnavigation

A feature of HTML5 and CSS3 is a modal window that automatically closes when the user

After following the steps outlined by Keenan Payne, I successfully created a modal window using HTML5 and CSS3. However, I am now seeking assistance with setting it up to close when users click on the darkened background outside of the modal window. Can an ...

htmlcsscross-browsermodal-dialogmodal-window

My navbar is not expanding properly when toggled

I've been struggling to understand bootstrap 4 and the navbar feature is giving me a hard time. I initially managed to get the icon to display correctly, but then I must have made a mistake because now it's not showing up at all. Additionally, I ...

htmlcssbootstrap-4

The issue with Open Sans and sans-serif fonts not rendering properly in all web browsers

I am having trouble with websites that use the Open Sans font appearing with a strange handwriting style. I'm not sure where this issue is originating from. Here are some things I have tried: Using In-Private browsing Disabling all extensions Testin ...

htmlgoogle-chromefontsmicrosoft-edge

Glitch in CSS causing issues with drop-down menu

When hovering over the Gallery, the sub menu list displays next to each other, but I want Sub 1 and Sub 2 to display below each other as a dropdown. How can I improve this code and is there any unnecessary code in it? Here is the picture: HTML: <div ...

htmlcssdrop-down-menunavigation

Image gallery floating

The image in the last position of this gallery is supposed to float left, but instead it appears centered. Can you spot the error in the code? To view the complete CSS code, click here. If you want to see the full HTML code, check it out here. This is t ...

htmlcssgallery

Detecting high contrast mode in Firefox using CSS or JavaScript

I am currently in the process of designing a high contrast version of a website. The code below is effective for Internet Explorer and Edge, but I am looking to specifically detect Firefox. @media screen and (-ms-high-contrast: active) {} Does anyone have ...

cssfirefoxaccessibilitycontrasthigh-contrast