概括
我希望显示一个不透明度约为 0.75 的 jQuery UI 对话框，我可以执行此操作。
但是，不透明度也会传递给整个.ui-dialog-content类和对话框。
我想独立于对话框核心及其内容来处理对话框的不透明度，所以无论是标题栏还是内容本身。
该对话框应显示在包含照片的背景上，我希望允许用户通过 0.75 的不透明度部分查看照片，比方说。但是随后，对话框内容中的文本变得更难阅读，因为它的不透明度也为 0.75，这使得文本就像默认颜色为灰色而不是黑色一样。
已执行的搜索
我在多个关键字下进行了研究，试图找出我如何能够达到预期的结果，并且每次我发现有关模态对话框覆盖的信息，这并不代表我的对话框。
以下是目前发现的结果：
- jQuery：设置模式对话框覆盖颜色
- Jquery UI 对话框中较暗的背景
- jquery-ui-dialog.css (源)
- jquery 空白/灰色显示对话框的页面
- 如何更改 jQuery UI 对话框的背景颜色？
至于更改对话框的背景颜色，我可以这样做。除此之外，当使用透明背景时，我几乎完成了我想要的。但是，由于我网站背景上的图像，某些短语恰好出现在难以阅读的地方。然后，我不希望有一个透明的背景，而是一个具有一定透明度的白色背景，不透明度确实给了我什么。但是当设置为 0.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示例
<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>
问题
一旦对话框的不透明度设置为 0.75，有没有办法防止对话框的文本显示为灰色？
谢谢大家！
解决方案编辑
根据Richard A.的回答，找到的解决方案如下：
Photoshop
- 使用 Photoshop 或任何等效工具创建具有透明背景的新图像
- 在 Photoshop 中，添加一个新图层并用 Pain Bucket 将其填充为白色
- 向下滑动位于图层上方的不透明度设置，您也可以使用填充
- 将图像另存为 Web 和设备
- 在此对话框中，选择 PNG-24 而不是默认的 GIF
- 确保选中透明度复选框并保存。
CSS
.ui-dialog {
background-image: url('path/to/my/dialog-background-translucent.png') !important;
background-repeat: repeat;
background: transparent;
/* Other settings here*/
}
注意!important用于 background-image 属性的关键字。这就是让一切变得不同的原因！
等等瞧！