Does anybody know how to make a div transparent without affecting the buttons inside of it?

#ss {
  background-color: black;
  width: 1500px;
  height: 80px;
  overflow-x: 0;
  margin-top: -8px;
  margin-left: -10px;
  opacity: 0.5;
  text-align: center;
  position: absolute;
}

#as {
  background-color: #968f8f;
  width: 70px;
  height: 40px;
  opacity: 1;
  margin-top: 15px;
  position: relative;
  color: white;
  border-radius: 4px;
}

#bd {
  background-color: grey;
  background-image: url("image3.jpg");
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-size: 1315px;
}
<body id="bd">

  <div id="ss">

    <table>
      <tr>
        <td>

          <button id="as"> Home </button>

        </td>

      </tr>
    </table>


  </div>

</body>

The issue I am facing is that I want the main div to be transparent but not affect the transparency of the buttons within it.

Answer №1

To eliminate the background color of your parent div, use the following CSS code:

#ss{ background:transparent; }

If you prefer to maintain a background color for the div, consider using rgba with the code: background:rgba(0,0,0,.5)

Answer №2

To start, remove the opacity attribute from #ss under the style tag.

If you want to completely eliminate the background:
Change:
#ss { background-color:black; }
To:
#ss { background:none; }

Alternatively, if you wish to apply an opacity value to the background:
Change:
#ss { background-color:black; }
To:

#ss { background:rgba(0, 0, 0, desired_opacity_value); }

where 0(min) <= desired_opacity_value <= 1(max)

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

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

The JavaScript function's argument is determined by the value submitted in EJS

I am currently in the process of developing an express application. One of the key features involves a drop-down menu where the selected value is sent to users.js to trigger a MongoDB query. The results of this query are then returned to the EJS template a ...

Looking to easily upload a JSON file, parse its contents, and display it on my index page with just a single button click using AJAX

I have a file named Name stored in my content folder, written in Json format. My goal is to display the content of Name.text after clicking a button. I developed some parsing code to interpret the json data, but I'm unsure where to integrate it. I bel ...

Conceal an element depending on the values of surrounding elements

I want to dynamically hide a table based on the values of two fields. If field2 is equal to field1, then I need the table to be hidden. JSfiddle HTML: <form> Expected Number of Items: <input type="text" value="14" name="totalItems" id="tota ...

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

Concealing columns in DataTables based on designated screen sizes

Issue I am facing a challenge with two DataTables — one with five columns and the other with four columns. My goal is to find a solution for hiding certain columns based on specific screen widths. Approaches I've Tested While resizing the browser ...

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...

Impossible to create margins on both the left and right side

Check out this cool pen: http://codepen.io/helloworld/pen/BcjCJ?editors=110 I'm facing an issue where I'm unable to create both left and right margins around my datagrid. Only the left margin seems to be possible. Any suggestions on how I can f ...

Can sound be triggered from a JS file within Django's HTML template without using Ajax?

I'm currently in the process of transitioning a website to utilize the Django framework. Most of the JS scripts are functioning properly, except for those that involve sound. Specifically, I have a play/pause button for a song and some sounds that sh ...

A duo of adjacent buttons styled with HTML, CSS, and Bootstrap

I'm encountering an issue with the layout of my design. On my product page, I have two buttons placed on top of each other because one is within a form (refer to the image). https://i.sstatic.net/cS9TI.jpg I would like to position the two buttons s ...

Using jQuery to toggle sliding the information above a div

I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and ...

Is it possible to retrieve the complete source HTML code of a webpage that is dynamically generated by JavaScript using Java and WebDriver?

I'm new to the world of programming and I've encountered a challenge that I need to overcome. I'm attempting to retrieve the HTML source code of a webpage using the Java / Webdriver method getPageSource(). However, the page seems to be dynam ...

Python Selenium if elif statements do not function properly in the scenario of clicking links

I want to automate the process of clicking links and extracting elements from a specific date, such as today. If the date is from yesterday, I want the program to quit. Despite using if-elif conditions, the website keeps clicking links regardless of the d ...

Issues with Flex layout in Firefox causing functionality errors

My two text inputs are not cooperating with flex properties as expected. They should be positioned like this: https://i.sstatic.net/ZSumb.png However, they are currently positioning like this: https://i.sstatic.net/e430n.png CSS .container{ width ...

How can I clear all checkboxes when the checkbox with id "checkAll" is selected?

Is there a way to uncheck all checkboxes when the checkbox with id="checkAll" is checked? In my demonstration, when a user checks the checkbox with id="checkAll", all checkboxes are also marked as checked. However, I actually want it so that when the che ...

Spin an object on a stationary axis

https://i.sstatic.net/8dT9W.gif Is there a method to create a similar effect using CSS, JS, or GSAP? ...

The button click event is failing to trigger the jQuery script

Attempting to retrieve selected data from a table using Bootstrap and jQuery. After selecting checkboxes and clicking the "Add to Cart" button, I need to get the chosen data from the table. Here is a snippet of my code: <!DOCTYPE html PUBLIC "-//W3C ...

The challenge of extending in SCSS

Within my SCSS code, I am attempting to create a placeholder with the following structure: %input__label { color: red; &_content { color: blue; } } Subsequently, I try to extend it like so: .input__label { @extend %input__lab ...

Set colors to CSS variables

Within my CSS I define several color variables, such as: $bkg-color: #ffffff While white is the default color, $bkg-color can also be customized by the user and saved. In my TypeScript file, I have: backgroundColor?: string = ''; The data fro ...

Tips on successfully transferring a JavaScript variable from PHP to JavaScript

I am struggling with how to manipulate a JavaScript variable in my HTML script and then pass it to a PHP file for incrementing by 1. However, I am unsure of how to return this modified variable back to the HTML file for display. Additionally, I am uncertai ...