Css jQueryUI对话框-只处理背景不透明度而不使字体变灰？

摘要

我希望显示一个不透明度约为.75的jQueryUI对话框，我可以执行该对话框

但是，不透明度也会传递给

.ui对话框内容

类和整个对话框

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

该对话框将显示在一个包含照片的背景上，我想让用户通过0.75的不透明度部分查看。但是，对话框内容中的文本也变得更难阅读，因为它的不透明度也达到了.75，使得文本就像默认颜色是灰色而不是黑色一样

已执行搜索

我在多个关键字下进行了研究，试图找出如何达到预期的效果，每次我都会发现一个模态对话框的叠加信息，它并不代表我的对话框

以下是目前发现的结果：

至于改变对话框的背景颜色，我可以做到。除此之外，在透明背景下工作时，我几乎完成了我想要的。但是，由于我在我的网站背景上的图片，有些短语恰好在某个地方更难阅读。然后，我不希望有一个透明的背景，而是一个有透明度的白色背景，不透明度给了我什么。但是当设置为.75时，

.dialog

甚至

.ui dialog

类的不透明度都是灰色的，这正是我不想实现的

CSS

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

Javascript

注意

！重要信息

用于背景图像属性的关键字。这就是造成一切不同的原因

---

瞧

不幸的是，这是一个功能，而不是一个错误。CSS继承意味着放置在父项上的任何不透明度属性也应用于其中的任何元素。通过使用

position:absolute

和

z-index

实验将对话框内容放在一个单独的DIV中，您可以做一些聪明的事情，但对于您想要实现的目标来说，这感觉像是付出了很多努力

更简单的是，您可以将对话框/标题的

背景图像

定义为半透明PNG图像，并将对话框的

不透明度

保留在原处。不过，这并不是唯一的CSS解决方案，这正是您想要的

---

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

事实上，我发现这是可行的：首先声明透明度，然后声明半透明图像

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

这将提供半透明的背景

---

谢谢你的指点。

我想知道如何实现我的目标，CSS不是唯一的选择。我只是认为应该有一种或另一种方法来实现它，因为我还不是使用jQueryUI的专家。因此，也许其他人以前也可以达到这样的结果。谢谢你的PNG解决方案（+1），我会调查此事，看看我能用它做些什么，然后让你知道。你的想法很管用！谢谢请查看我的编辑以查看整个解决方案。=）

<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>

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

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