Stop images from appearing transparent when placed inside a transparent div

My issue is clearly visible in this image:

The div element is transparent and affecting the images inside it. Below is my HTML code:

<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
    <div class="cnvptr">
        <img src="uploadfabrics/14606171783156.jpg" >
    </div>
    <div class="cnvptr">
        <img src="uploadfabrics/16292373497271.jpg" ></div>
    </div>

These are the CSS codes I'm using:

#cselect {
    padding: 15px;
    width: 90%;
    padding: 2%;
    background: black;
    opacity: 0.5;
    position: relative;
}
.cnvptr {
    background: black;
    opacity: 1 !important;
    width: auto;
    display: inline-block;
}

I tried putting a div around each image with class cnvptr, giving it a black background, but the transparency remains. How can I prevent the image backgrounds from being transparent?

Thank you.

javascriptjqueryhtmlcss

Answer №1

You have the option to use rgba instead:

background-color: rgba(0, 0, 0, 0.5);


#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}
<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

The same result can be achieved using opacity:

#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  opacity: 0.5;
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}
<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

Answer №2

Try using a background color with RGBA values instead, and keep the opacity of the element at 1.

#cselect {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

Answer №3

Keep in mind that using rgba(0,0,0,.5); may cause compatibility problems.

For details on RGBa browser support, visit this link.

An alternative approach: In this scenario, the suggested solution may not work as expected. Consider adjusting your HTML structure by placing inner divs outside of the id="cselect" element.

HTML

<div id="parent">
    <h2>Hello World!</h2>
    <div class=”tp-bg”></div>
</div>

CSS

.tp-bg
{
    background: #000;
    height: 80px;
    width: 100%;
    opacity: 0.3;
}

For more tips on addressing the CSS Opacity issue with child divs, check out this blog post.

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

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

javascriptiframecrossrider

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

Ensuring that the last function receives all necessary data by utilizing deferred functions

How can I ensure that the function displayResults() retrieves data before displaying it? Both getResultA() and getResultB() functions utilize $.Deferred. Additionally, getResultB() relies on the results from getResultA(). function getResultA() { var def ...

jqueryjquery-deferred

Struggling to input data into Excel using Selenium WebDriver

I encountered an issue while attempting to write two strings to an Excel sheet using the following code. The error message I received was: java.lang.IllegalArgumentException: Sheet index (0) is out of range (no sheets) FileOutputStream fout=new FileOutput ...

javascriptjavaexcelselenium

Turning a stateful React component into a stateless functional component: Ways to achieve functionality similar to "componentDidMount"

I recently developed a small, stateful React component that utilizes Kendo UI to display its content in a popup window when it loads. Here is a snippet of the code: export class ErrorDialog extends React.Component { constructor(props, context) { sup ...

javascriptdomreactjsevent-handlingwindow-load

`Why won't Puppeteer let me pass a variable into a page URL parameter?`

Encountered an error message: Error: Protocol error (Page.navigate): Invalid parameters Failed to deserialize params.url - BINDINGS: mandatory field missing at position 49... The issue arises when trying to pass a variable into the page URL parameter as s ...

javascriptnode.jsexpresspuppeteer

Are your user choices disappearing within jQuery duplication?

The context in which the issue arises is not crucial to understanding, but to give a brief overview: I am working on a form that has expandable sections where users can edit information and then collapse them. The form fields retain their state each time. ...

jqueryselectclone

How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available: 1. The ability to add or remove rows 2. Adding data into a row using different controls such as combo-boxes, text boxes, etc. One of the controls is a text box labeled "Additional Information ...

htmlangulartypescriptangular-material

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

javascriptjqueryhtmltwitter

The choices in the second dropdown menu will change based on the selection made in the first dropdown menu

Currently utilizing reactJS, I have the choices for two dropdown lists named categories and items. constructor(props) { super(props) } this.state = { categories: [ { "id": 1, "category_name": ...

javascriptreactjsarrayscomparejavascript-objects

"Convert a date string to a date object using the verbose moment date

I utilized the materialize datepicker to select a date in French format. Now I need to convert this formatted date back to a date object for use in my API. Here's how I attempted to revert the date to a standard format: moment("dimanche 30 juillet 20 ...

javascriptangulartypescriptmomentjsmaterialize

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

javascriptreactjstypescripttypescript-genericsreact-typescript

Mongoose encounters an issue: MissingSchemaError is thrown because the Schema has not been registered for the model

Encountering a perplexing error that I can't seem to resolve. I HAVE NAMED THE REF EXACTLY AS THE MODEL: MissingSchemaError: Schema hasn't been registered for model "ParticipantStatus". Here are the models in question: ParticipantStatus model: c ...

javascriptnode.jsmongodbmongoose

NodeJs guide on removing multiple documents from a MongoDB collection using their _id values

Consider the following array of _ids: ["a12s", "33qq", "121a"] In MongoDB, there are methods such as deleteMany, which allows deletion based on specific queries: var myquery = { address: 'abc' }; dbo.collection("customers").deleteMany(myque ...

javascriptnode.jsmongodb

Ways to clear the GET parameters in a MySQL/jQuery ajax request

When performing an ajax call to fetch data from a MySQL database and setting it to run at regular intervals, the question arises about where to store the GET values for clearing purposes. Below is a snippet of code in test.js: var fill = function () { ...

phpjquerymysqlajax

What is the process for inserting a new item into a mongoose array?

I'm currently developing a confidential web application. Below is the layout I've created for the user. const itemsSchema = { name: String } const userSchema = new mongoose.Schema({ username: String, email: String, password: String, M ...

javascriptnode.jsexpressmongooseejs

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

javascripthtml

Guide to sending JSON data to a server and retrieving it back using AJAX - a detailed breakdown of the

As I work on my project web page, I am exploring the use of JSON to facilitate the transfer of data between the user and the server. However, I find myself a bit puzzled about the sequence of steps involved in each JSON method. Here is my current understan ...

javascriptphpjsonajax

Creating arrays in JavaScript with or without the use of jQuery

In my JavaScript script, I am defining this array: var status=[ { "name":"name1", "level":0 }, { "name":"name2", "level":0 }, { "name":"name3", "level":0 }, { "name":" ...

javascriptarrays

Issue with onblur and focus while returning back from external window

Instructions to reproduce the issue: Important: Set up two input fields with names and add a console.log("Test Focus In" + element.getAttribute("name")) and console.log("Test Blur" + element.getAttribute("name")) statement in the focusin and blur event f ...

javascriptjquerygoogle-chromefocus