元素背景顏色和背景圖片

這個想法是當人們無法填寫所需字段顯示爲對話框時出現的無效錯誤提示。因此，箭頭圖像顯示在文字的中心和下方，並指向他們錯過的字段。元素背景顏色和背景圖片

HTML：

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS：

.wpcf7-not-valid-tip { 
     background: red; 
     color: white; 
     padding: 10px; 
     width: 100px; 
     background-position: 0 0; 
     background-repeat: no-repeat; 
     background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png'); 
}

正如你可以看到我有一個背景顏色，並且需要在坐的箭頭圖像元素的中間和下面，但當然，如果你使用backgroun來定位它d位置時，圖像被隱藏起來，因爲它不能從元素本身溢出。如果我可以輕鬆編輯HTML，這很容易，但我不希望因爲我正在使用插件而希望在將來免費更新插件。

問題：

是否有一個純CSS的解決方案嗎？

如果不是（我懷疑沒有）解決這個問題的最簡潔的方法是什麼？我是否會使用add_filter來改變HTML以將工具提示放在div上，然後我可以將bg圖像添加到？用CSS「內容：」，一個JS解決方案？

來源

2013-10-07 Dean_Wilson

'背景image'不能超越國界的元素。箭頭看起來很俗氣，爲什麼不在錯過的元素上留下紅色背景和紅色邊框。 – gwillie

小提琴並不代表它將如何實際上看，我不尋找替代設計思路，但無論如何感謝。 –

在別處得到答案，除非有人能想到更好的東西，否則會接受。

http://jsfiddle.net/D2KFX/2/

這工作完全使用CSS（儘管與所述內容添加內容：聲明）通過繪製三角形帶有邊界，而不是使用圖像它。

CSS

.wpcf7-not-valid-tip { 
     background: red; 
     color: white; 
     padding: 10px; 
     width: 100px; 
} 
/* Updated code */ 
.wpcf7-not-valid-tip { 
    position: relative; 
} 
.wpcf7-not-valid-tip:after { 
    top: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: rgba(255, 0, 0, 0); 
    border-top-color: red; 
    border-width: 10px; 
    left: 50%; 
    margin-left: -10px; 
}

來源

2013-10-07 03:36:41

元素背景顏色和背景圖片

回答

相關問題