css - jQuery UI 对话框 - 仅使用背景不透明度而不使字体变灰？

Question

Summary

我希望显示一个不透明度约为 0.75 的 jQuery UI 对话框，我能够执行此操作。

但是，不透明度也会传递给 .ui-dialog-content 类和整个对话框。

我想独立于对话框核心及其内容来处理对话框的不透明度，标题栏和内容本身也是如此。

对话框应显示在包含照片的背景上，我希望允许用户通过 0.75 的不透明度部分查看，比方说。但是随后，对话框内容中的文本变得更难阅读，因为它的不透明度也达到了 0.75，使文本看起来就像是灰色而不是黑色作为默认颜色。

Searches already performed

我在多个关键字下进行了研究，试图找出如何达到预期的结果，每次我都找到有关模态对话框覆盖的信息，这并不代表我的对话框。

以下是目前发现的结果:

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?

至于改变对话框的背景颜色，我能够做到。除此之外，在透明背景下工作时，我几乎完成了我想要的。但是，由于我网站背景上的图像，有些短语恰好位于难以阅读的地方。然后，我不希望有一个透明的背景，而是一个具有一定透明度的白色背景，不透明度确实给我带来了什么。但是当设置为 .75 时，.dialog 甚至 .ui-dialog 类的不透明度，一切都是灰色的，这正是我不希望的实现。

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

一旦对话框的不透明度设置为 .75，是否有办法防止对话框的文本显示为灰色？

谢谢大家!

Solution Edit

根据 Richard A.答案，找到的解决方案如下:

Photoshop

1. 使用 Photoshop 或任何等效工具创建具有透明背景的新图像
2. 在 Photoshop 中，添加一个新图层并使用 Pain Bucket 将其填充为白色
3. 向下滑动图层上方的不透明度设置，您也可以使用填充
4. 将图像保存为用于 Web 和设备
5. 在此对话框中，选择 PNG-24 而不是默认的 GIF
6. 确保选中透明度复选框并保存。

CSS

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

注意用于 background-image 属性的 !important 关键字。这就是让一切变得不同的原因!

瞧瞧!

Answer 1

不幸的是，这是一个特性，而不是一个错误。 CSS 继承意味着放置在父项上的任何不透明度属性也适用于其中的任何元素。您可以通过使用 position: absolute 将对话框内容放在单独的 DIV 中来做一些聪明的事情。和 z-index实验，但感觉您要付出很多努力才能实现目标。

更简单的是，您可以定义对话框/标题的 background-image作为半透明的 PNG 图像并保留 opacity对话框的位置。不过，它不是纯 CSS 的解决方案，而这正是您正在寻找的。

希望这有助于澄清您的问题!