元素背景颜色和背景图片

这个想法是当人们无法填写所需字段显示为对话框时出现的无效错误提示。因此，箭头图像显示在文字的中心和下方，并指向他们错过的字段。元素背景颜色和背景图片

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

元素背景颜色和背景图片

回答

相关问题