CSS opacity is currently not working as intended

Why doesn't the opacity work here? I've tried using hex and rgba colors, but nothing changes. Even adding classes to tr and td didn't help...

First attempt:

.done{
    background-color: rgba(0,175,51,5);
    color:white;
    opacity: 50;
    filter:Alpha(Opacity=50);
}

Second attempt:

 .done{
    background-color:#00AF33;
    color:white;
    opacity: 50;
    filter:Alpha(Opacity=50);
 }

<table align='left' width='95%' class='childTasks'>
   <tr class='done'>
    <td id='1' class='childData done' width='15%'>Frank</td>
   </tr>
</table>

Fiddle

htmlcss

Answer №1

Opacity is a numerical value that ranges from 0 to 1, with 0 representing complete transparency and 1 representing full opacity. A common value used for opacity is 0.5.

.completed-task {
    background-color: rgba(0, 175, 51, 100);
    color:white;
    opacity: 0.25;
    filter:Alpha(Opacity=50%);
}
<table align='left' width='95%' class='sub-tasks'>
    <tr class='completed-task'>
        <td id='1' class='task-data completed-task' width='15%'>Frank</td>
    </tr>
</table>

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

Weather Application featuring Circular Slider

I've been on the hunt for a circular slider animation. Imagine it working like this: <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> function showValue(newValue ...

javascriptjqueryhtmlcssslider

Responsive design causing images to be invisible in Internet Explorer

Hey there! I have a live website (check it out here, although it's currently behind a "coming soon" cover). The site has two stylesheets: one for regular styles (style.css) and one specifically for responsive design (width.css). The responsive stylesh ...

htmlcssimageinternet-explorerresponsive-design

Sometimes the data-autoplay feature does not function properly in jQueryfullPage.js

I am in the process of developing an HTML page using jQueryfullPage.js. Within this page, I have incorporated 17 videos across 17 different sections. These videos are presented as YouTube iframes with a data-autoplay attribute. Overall, everything is fun ...

javascripthtmlfullpage.js

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

javascriptcsswordpressthickbox

Steps to create a pop-up displaying a unique message ID retrieved from my database

My goal is to implement a pop-up message dialog on my website. When a user clicks on a reply icon, a pop-up message will appear with a textarea for the user to respond to a question they have been asked. The current issue is that clicking on the tag alway ...

javascriptphphtmljqueryajax

Issues with Converting JSON to HTML Table using JavaScript

Issues with Converting JSON to HTML Table Using JavaScript I've been trying to create a function that will display the contents of a JSON file in an HTML table. However, I keep getting an undefined error. Despite being able to see the data displayed ...

javascriptjqueryhtmljson

What is the best way to sort ng-options in an AngularJS select element?

I am encountering a situation where I have the following code snippet: <select ng-model="person" ng-options="person.name for person in mv.people"> However, within the mv.people array, there are certain members that I need to hide. For examp ...

htmlangularjsangularjs-ng-options

JavaScript code that activates several hovering elements

I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from som ...

javascriptjqueryhtmlcsstriggers

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

htmlcss

Adding a Header Image to the Top of All Pages with CSS

As I dive into the world of website creation, I've encountered a challenge that has me stumped. My goal is to have a banner displayed at the top of each webpage on my site, and I'm unsure if this can be achieved using CSS. While I've success ...

htmlcss

History.pushState is not a function that I utilize in my work

Can anyone assist me with implementing the history.pushState jQuery code? I am struggling to get it to work and I don't have much knowledge on how to do it. Any help would be greatly appreciated. Here is the code I have so far... <!doctype html> ...

jqueryajaxhtmlpushstate

"Aligning the logo and navbar links to appear on the same line

I'm looking to align the logo and the navigation bar links on the same line. The logo should be displayed alone when viewed on a mobile device. Here's how it currently appears: Currently shown on two lines. This is the HTML code for it: ...

htmlcss

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

Instead of manually typing out multiple div tags in the HTML, I would like to dynamically generate them using JavaScript and display them on the page. Below is an attempt at achieving this, but it appears to not be functioning correctly. var arr = {}; f ...

javascriptjqueryhtml

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

javascriptandroidjqueryhtmlwebview

What is the best way to style a tiled design using CSS?

What is the best way to code the page without using javascript? Both of the HTML elements (div1, div2) need to have a fixed size. ...

htmlcss

Utilizing Jquery to transform characters into visual representations

Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...

jqueryhtmlfonts

Invoking a Jquery Dialog

Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...

javascriptjqueryhtmlasp.net

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

What is the best way to prevent the contents of the First Column from spilling over into the Second Column using CSS

Currently, I am working on the CSS for two column sections: section one and section two. My goal is to have the first column of section one occupy the available space without overflowing into the second column, as illustrated in this image. The content hi ...

htmlcss