How can I remove unnecessary CSS opacity from images?

As I set up my WordPress website, I decided to use opacity to create a parallax scroll effect. However, the background image shines through even on non-transparent foreground images. This issue is impacting the overall appearance of my website.

You can view the problem at

I attempted to resolve this by editing the style sheet (style.css) but couldn't find a solution. Here's the structure of the HTML:

<article>
  <div>
    <p>
      <img> [the problematic image along with text]

Here's what I've tried so far:

  • Adding "opacity: 1.0;" to the img, div, and article class styles only works for the article, causing me to lose opacity behind the text as well.
  • Adding "z-index: 10000; !important" to the img class had no effect.

What I haven't explored yet:

  • In the page source, the image also has the class "wp-image-603," but I'm unable to locate where to edit the wp-image class since it's not in my theme CSS. Perhaps addressing this could help solve the issue.

I am using the latest version of Chrome (36), and I also tested the webpage in Opera, but the problem persists. It seems like I have hit a roadblock in resolving this issue.

cssopacity

Answer №1

By modifying the article tag's background CSS property, you can alter its opacity without affecting the content inside it. Instead of your current approach:

article {
    background: #fff;
    opacity: 0.90;
}

Try this alternative method:

article {
    background: rgba(255, 255, 255, 0.90);
}

With this adjustment, only the transparency of the white background will be modified to 0.90, preserving the integrity of the inner content.

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

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

javascriptphpandroidcssipad

What makes text-decoration a crucial element of the foreground design?

<span>Educating children on unlocking their creative and intellectual potential through the world of Computer Science.</span> Here is the HTML code provided above along with the corresponding CSS: span { text-decoration: underline; color: red ...

htmlcss

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

javascriptcssjsonangularjs

Ways to prevent flex from expanding all the way to 100% width?

My section has two columns centered in flexbox, but the container doesn't wrap around them as expected and instead fills the whole page. How can I make the section wrap around the text with a padding of 1rem? body { background-color: #444; col ...

htmlcssflexboxcentering

position overlapping div elements

There are three float:left divs in my setup <div class="center"> <div class="fade1"></div> <div class="fade2"></div> <div class="fade3"></div> </div> The objective is to click on these divs and reveal co ...

jquerycss

Set a background image URL for a specific division inside a template

I have a drawPlaceDetails function that populates an HTML template with values. The getPhotoURL() function retrieves a URL link to an image, which I am trying to assign to the background-image property. However, the div remains empty without displaying the ...

javascriptjqueryhtmlcss

How to modify the background color of a <td> element using CSS and PHP

I am working on a PHP code snippet that populates a table from a MySQL database. <?php while($res = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>".$res['id']."</td>"; ...

phphtmlcss

Issues with IE6 hover state not properly resetting

Tutorial This particular issue has been isolated in the test case provided above. It is easily noticeable when viewed in IE6. Description of the Issue In Internet Explorer 6, when hovering over the link, all child elements that are supposed to be visibl ...

cssinternet-explorer-6

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image

Is the row border camouflaged by the background?

feed_page: { margin: 'auto' }, feed_list: { margin: 'auto' }, feed_item: { textAlign: 'center', backgroundColor: '#fff', borderBottom: '1px solid #e0e0e0', margin: '10 ...

cssreactjsreact-virtualized

Using Jquery for conditional statements: if versus else

$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...

jquerycssif-statement

Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...

javascripthtmlcssreactjs

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

Steer clear of altering line spacing in CSS

Here is the HTML structure that I am working with: <div id="id1"> <h1>my name </h1><h3><a href="mailto:myemail_id"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff92869a929e9693969bbf878685d19 ...

htmlcss

What is the best method to eliminate the .invisible div entirely from your website?

I want to hide a select tag and only display it when necessary. To achieve this, I tried using the .invisible class from Bootstrap, but the issue is that even when hidden, it still takes up space. <div class="row invisible"> <div class="fo ...

htmlcssbootstrap-4

Modify the text field's color when it is in a disabled state

When the text field is disabled, I want to change its color. Below is the code I have written for enabled and disabled states. The style works correctly when the text field is enabled. const StyledTextField = styled(({ dir, ...other }) => <TextFiel ...

cssreactjsmaterial-ui

There seems to be a problem in Safari with the use of `:after` and `:before` when applying

I've been facing an issue with Safari not properly box-sizing after the "load" function. It functions perfectly on Chrome, Firefox, and IE, but not on Safari. You can view the specific page with the problem here: goo.gl/HKJy4g The problem lies with ...

htmlcsssafari

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

I want to learn how to change the background image in React based on different components

Hey there! I've been learning and came across the Tomorrowland website. I really love the background scrolling effect on the homepage, where it changes depending on the component. I'm not sure how to code it myself and could really use some assis ...

cssreactjsscrollbackground

Discrepancies in media screen queries displaying on inspection tools compared to actual device

I've done some research online but I'm still struggling with this issue. Despite creating media screen queries and setting the viewport for iPhone 7 plus, the website does not display correctly on my device. When I inspect it using Chrome, every ...

cssmedia-queries