我从
http://www.ilikepixels.co.uk/drop/bubbler/生成一个泡沫聊天
在我的页面,我把一个数字里面
.bubble { position: relative; width: 20px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #FFF; display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: 4px; left: -5px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #000; display: block; width: 0; z-index: 0; }
我想要的气泡的背景颜色根据其中的数字通过rgb改变
所以如果我的div
<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>
我想要的颜色是rgb(100,255)
事情是这不影响三角形。
我如何写内联css,使它将包括:before和:after?
解决方法
你不能。使用内联样式,您直接定位元素。您不能在那里使用其他选择器。
你可以做的是在样式表中定义不同的类,定义不同的颜色,然后将类添加到元素。