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

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

htmlurlfirefoxcharacter-encoding

CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve thi ...

htmlcss

Guide on converting a JSON containing nested JSONs into an HTML table

Currently, I am working with a JSON data structure that contains nested dictionaries. My goal is to create an HTML table where each top-level key serves as a column in the table. The inner key-value pairs should be represented as a single text within cells ...

javascripthtmljsondynatable

Tips for effectively redirecting multiple links on a website

Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...

phphtmlhttp-redirect

The execution of the selenium script is unreliable

Recently, I created a selenium script to automate certain manual checks on http:obsessory.com. The script utilizes a looping concept, such as mouse hovering over the Top menu and clicking on various submenus. However, during testing, I have encountered spo ...

htmlselenium

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Steps for activating all iframes on an HTML page

Seeking a solution to enable all iframes on my webpage without encountering the 'refused to connect' error. Is it feasible with the implementation of a meta tag? If yes, could someone provide a code snippet for reference? ...

htmliframe

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...

cssreactjsmaterial-uijss

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

I am a newcomer to knockout JavaScript and am currently utilizing Knockout drag and drop functionality in my project. Initially, I have two divisions - one is visible while the other has a display property set to none. During the drag enter function, I wan ...

jqueryhtmlcssknockout.js

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

jquerycsscheckbox

Adjust words to fit any screen size as needed

Looking for a small program that can dynamically change a word within an SVG? The goal is to create an effect where regardless of the word or group of words, they always stretch along the entire height (due to a 90-degree rotation) by adjusting the font si ...

javascripthtmlsvg

Using CSS and jQuery to Enhance Page Transitions

Seeking assistance with creating a unique page transition similar to this one: Basing the animation on my own design concept found here: Current experiment can be viewed at: https://jsfiddle.net/f7xpe0fo/1/ The animation does not align with my design vi ...

jqueryhtmlcss

JavaScript for switching between grid layouts

I have organized 3 DIVs using a grid layout. There is a Navigation bar with an on-click event attached to it. When a button on the nav-bar is clicked, I want the JavaScript function to display the corresponding grid associated with that button. Currently, ...

javascripthtmlgrid

Storing ng-change event for a checkbox in AngularJS in a valid manner

I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...

javascriptjqueryhtmlangularjscheckbox

"Unlock the secrets to commanding respect in the web form layout by mastering the art

I have a fieldset that includes a legend with potentially long text content. I need the legend to only take up 50% of the width of the fieldset. Currently, when the legend is too lengthy, it still occupies 50% of the space but causes the entire fieldset ...

htmlcssfieldset

Continuously executing a series of JQuery functions or iterating through them repeatedly

Struggling with a jQuery animation loop issue that has me stuck. I need the animation to repeat continuously, but it's not working despite trying setInterval. Can anyone assist? Here's the fiddle link: https://jsfiddle.net/8v5feL9u/ $(document). ...

javascriptjqueryhtmlfrontend

CSS animation for input range slider

Is there a way to create smoother animations for the input[type="range"] element, especially when dealing with short audio files? You can check out my Codepen where I've been experimenting with solutions using a short audio file: Codepen Link I am s ...

csshtmlcss-animations

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

javascripthtmlcss

moving the array generated on the HTML page to a different page

Can anyone help me with transferring an array from one page to another? I have a list of names in the code below and I want to be able to access and print this array on another page using JavaScript. Your assistance is greatly appreciated! <html> ...

htmlarrayswebcopy