jQuery UI對話框 - 只使用背景不透明而不使用字體？

摘要jQuery UI對話框 - 只使用背景不透明而不使用字體？

祝具有約0.75的不透明度，這我能夠執行以顯示一個jQuery用戶界面對話框。

但是，不透明度也傳遞給.ui-dialog-content類和整個對話框。

我想獨立於對話框核心及其內容工作對話框的不透明度，所以不管是標題欄還是內容本身。

對話框應顯示在包含攝影的背景上，我想讓用戶通過.75的不透明度部分查看攝影。但是，對話內容中的文本變得難以閱讀，因爲它也得到了.75的不透明度，使得文本就像是灰色而不是黑色作爲默認顏色。

搜索已經進行

我已經在多個關鍵字研究，試圖找出我怎麼能達到預期的效果，每一次我發現了大約一個模式對話框的覆蓋信息，這並不代表我的對話。

這裏的結果迄今發現：

至於陳注意對話框的背景顏色，我能夠這樣做。另外，使用透明背景時，我幾乎可以完成我想要的任務。但是，由於我在網站背景上的圖像，有些短語恰好在某處難以閱讀。然後，我不希望有一個透明的背景，而是一個透明的白色，不透明度給我的東西。但是，當設置爲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中，添加一個新層，填充白色的痛苦桶
滑下來的不透明度設置正好位於層上面，你可以與填充太
保存圖像作爲網絡播放和設備
在此對話框中，選擇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關鍵字。這是什麼使所有的差異！

等voilà！

來源

2013-02-13 Will Marcouiller

不幸的是，這是一個功能而非錯誤。 CSS繼承意味着放置在父項目上的任何不透明屬性也適用於其中的任何元素。通過使用position: absolute和z-index實驗將對話內容放置在單獨的DIV中，您可以做一些巧妙的事情，但對於您試圖實現的目標而言，感覺像是付出了很多努力。

更簡單，您可以將對話框/標題的background-image定義爲半透明PNG圖像，並將對話框的opacity保留爲原來的位置。這不僅僅是一個純CSS的解決方案，這正是你所期待的。

希望能幫助澄清你的問題！

來源

2013-02-13 09:30:37

我想知道如何實現我的目標，而CSS不是唯一的選擇。我只認爲應該有一種或另一種方式來實現它，因爲我還沒有專家使用jQuery UI。所以也許其他人可能以前取得過這樣的成績。感謝您的PNG解決方案（+1），我將對此事進行調查，看看我能用它做什麼，並讓您知道。 – 2013-02-13 17:37:56

你的想法工作得很好！謝謝！請參閱我的編輯以查看整個解決方案。 =） – 2013-02-13 20:33:04

其實我發現這工作：申報的透明度第一則半透明圖像

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

這會給出一個半透明的背景。

感謝您的指點。

來源

2013-11-22 14:42:05 bds

jQuery UI對話框 - 只使用背景不透明而不使用字體？

回答

相關問題