jQuery UI Dialog - Work with the background only opacity without graying the fonts?

Question

Summary

I wish to display a jQuery UI Dialog with an opacity of about .75, which I am able to perform.

However, the opacity is also passed to the .ui-dialog-content class and the dialog in its whole.

I would like to work the opacity of the dialog independently from the dialog core and its content, so be it the title bar and the content itself.

The dialog shall be displayed over a background that contains a photography which I'd like to allow the user to view partially through an opacity of .75, let's say. But then, the text within the content of the dialog becomes harder to read as it gets the opacity of .75 too, making the text just like if it was gray instead of black as the default color.

Searches already performed

I have researched under multiple keywords to try to find out how I could achieve the desired results, and each time I found information about the overlay of a modal dialog, which doesn't represent my dialogs.

Here are the results found so far:

1. jQuery: Set modal dialog overlay color
2. Darker background in Jquery UI dialog
3. jquery-ui-dialog.css (source)
4. jquery blankout / grayout the page where dialog box is showing
5. How to change background color of jQuery UI Dialog?

As for changing the dialog's background colour, I was able to do so. Aside, when working with a transparent background, I almost accomplish what I want. But, some phrases happens to be there somewhere where it's harder to read because of the image I have on the background of my site. Then, I wish not to have a transparent background, but a white one with some transparency, what the opacity does give me. But when set to .75, the opacity of the .dialog or even the .ui-dialog classes, everything is grayish, which is precisely what I don't want to achieve.

CSS

.dialog {
    box-shadow: 0 4px 4px 0 #888;
}

.dialog .ui-dialog-titlebar {
    background: rgb(74, 159, 63);
    color: white;
}

.ui-dialog {
    border: 1px solid rgb(74, 159, 63);
    border-bottom: 0px;
    color: #333;
    font: 18px/120% Arial, Helvetica, sans-serif;
    opacity: .75;
}

.ui-dialog-content {
    opacity: 100;
}

Javascript

$(document).ready(function() {
var corporationKey = 0;
var servicesKey = 1;
var fadeEffectDuration = 500;
var dialogWidth = 1000;

var dialogs = new Array("#CorporationDialog", "#ServicesDialog");

$(dialogs[corporationKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

$(dialogs[servicesKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

// Opens the Enterprise dialog
$("#CorporationMenu").click(function() { 
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[corporationKey]);
    return false; 
});
// Opens the Services dialog
$("#ServicesMenu").click(function() {
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[servicesKey]);
    return false;
});

$("#accordion").accordion({ active: false, collapsible: true, heightStyle: "content" });
});

function closePreviouslyOpenedDialogs(dialogs) {
for (var i=0;i<dialogs.length;i++) {
    closeDialog(dialogs[i]);
}
}

function closeDialog(key) {
    $(key).dialog( "close" );
}

function openDialog(key) {
    $(key).dialog( "open" );
}

HTML sample

<div id="CorporationDialog" title="Entreprise">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Question

Is there a way to prevent the text of a dialog to appear grayish once the opacity of the dialog is set to let's say .75?

Thanks y'all!

Solution Edit

As per Richard A. answer, the solution found is as follows:

Photoshop

1. Create a new image with a transparent background using Photoshop or any equivalent tool
2. In Photoshop, add a new layer and fill it white with the Pain Bucket
3. Slide-down the opacity setting located just above the layers, and you may play with the filling too
4. Save the image as for Web and Devices
5. Within this dialog, select PNG-24 instead of the default GIF
6. Make sure the Transparency checkbox is checked and save.

CSS

.ui-dialog {
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    background: transparent;
    /* Other settings here*/
}

Notice the !important keyword used for the background-image property. That is what makes all the whole difference!

Et voilà !

Answer 1

Unfortunately, this is a feature rather than a bug. CSS Inheritance means that any opacity property placed on a parent item also applies to any element within it. You could do something clever by placing the dialog content in a separate DIV using position: absolute and z-index experimentation, but it feels like a lot of effort for what you're trying to achieve.

Even easier, you could define the dialog/header's background-image as a translucent PNG image and leave the opacity of the dialog where it is. It's not a CSS-only solution though, which is what you appear to be looking for.

Hope that helps clarify your problem a bit!

Answer 2

Actually I found this to work : declare the transparency first then the semi-transparent image

.ui-dialog {
    background: transparent !important;
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    /* Other settings here */
}

This will give a translucent background.

Thanks for the pointers though.