JQuery UI選項卡 - 透明背景

我無法設置jqueryUI選項卡具有透明背景。我採取了basic tabs example並添加了以下代碼，例如建議here，但試圖設置透明背景：JQuery UI選項卡 - 透明背景

body { background: #ddddff; } 
.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel, 
.ui-widget-header .ui-state-default, 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
{ 
     background: transparent; 
}

的問題是，存在在有源標籤的導航插件剩餘線（邊界 - 底部）：

enter image description here

我也試圖設置background-image: none，建議here，但它沒有幫助。

我有jquery-ui 1.10.3，在主題「smoothnes」上測試過。

來源

2014-01-09 TMS

在JSFiddle上放一個例子 – 2dar

你可以很容易地把基本標籤的例子我鏈接並添加我的問題在我的問題.. – TMS

Got it！只需將transparent更改爲inherit！這是一個騙術！

.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel, 
.ui-widget-header .ui-state-default, 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
{ 
     background: inherit; 
}

這只是夠將其放置到以下因素：

.ui-tabs, 
.ui-widget-header, 
.ui-widget-header .ui-state-default, 
.ui-widget-header .ui-state-active 
{ 
     background: inherit; 
}

的問題是 - 是不是髒了？它是跨瀏覽器安全的嗎？

來源

2014-01-09 22:00:36 TMS

嘗試background: rgba(0,0,0,0);看看是否有什麼區別？

你可以設置一個小提琴嗎？

來源

2014-01-09 21:55:49 Phlume

的原因爲DV？ – Phlume

背景是好的問題是邊界 – DaniP

OP說：「我無法設置jqueryUI選項卡具有透明背景。」 – Phlume

簡單。添加下面的類的CSS發佈之後：

.ui-widget-header { 
    border-bottom:0; 
}

UPDATE：

上面的代碼將刪除導航，這是不是我們想要的整個邊框底部。 jQuery使用活動選項卡的類背景來覆蓋（或隱藏）它下面的邊框，從而得到與下面的內容相匹配的效果。

由於我們的背景設置爲transparent，我不認爲可以通過jQuery UI如何構造這些選項卡來隱藏下邊框。相反，我們提供了一個裸線框。

我建議提出一種替代方法來顯示選項卡式內容，而不是使用jQuery UI的庫。

來源

2014-01-09 21:57:41

你測試了嗎？這將肯定會移除*整個*水平線。 – TMS

哎呀，誤解了你評論中的「活動標籤」部分。很快會更新。 –

您看到的邊框是ul元素中的一個，此類.ui-widget-header。是用來給有源標籤與他的背景隱藏邊框和性質的視覺效果：

.ui-tabs .ui-tabs-nav li.ui-tabs-active { 
    margin-bottom: -1px; 
    padding-bottom: 1px; 
}

由於您的活動選項卡並沒有背景不再那麼難以掩飾的邊界。

來源

2014-01-09 21:59:33 DaniP

所以，這是一個解釋，但不是一個解決方案嗎？ – TMS

@Tomas是的，你的解決方案在某個時刻仍然需要一個背景。如果你繼承了你獲得ul小部件頭的bg，那麼你可以隱藏邊界，當然不透明 – DaniP

那麼你提出了什麼？ – TMS

JQuery UI選項卡 - 透明背景

回答

相關問題