今天闲逛一些设计网站时候，发现一种文章插入图片的背景效果处理：图片居中，然后是图片背景是等宽的区域，无论图片大小。自己觉得这个挺不错，相对我们习惯的图片设置border和padding的样式。我这里上传两张（一竖一横）图片让大家看看这个效果（在RSS阅读器看此文的朋友需要到本站一趟了，否则看不了效果）：
我简单地说一下，上面两张图片只是在WordPress的后台上传插入，没有修改其代码。一般情况下，如果我们只在CSS中设置<img>的样式是很难做出上面的效果的，因为我们虽然能对图片进行居中，加边框，加背景等处理；但对于宽度不一样的图片，我们并不能保证它的背景会一样宽，因为此时它们的padding-left和padding-right的值会不一样；但是，WordPress会很自动地会为每张上传的图片前后加上<p>标签，而当我们把图片的背景样式应用到这个<p>标签上，上面的样式就可以解决了。
但是，如果我们每插入一张图片都要切换到xhtml编辑，为每个<p>都手工添加成如<p class="xxx">的话，不是很麻烦吗？这个时候我想到JQuery，如果用它自动搜索到包含<img>的每下个<p>，然后再自动为这些<p>添加一个样式“xxx”，不就行了吗？
在JQuery的说明文档中找到如下的两个函数：Selectors/has和Attributes/addClass，具体用法大家都去看下吧，很容易懂的。
我在站内加载的JavaScript中增加如下一句：
$(document).ready(function() {
$("#content p:has(img)").addClass("imgbg");
});
上面的语句是通过JQuery自动查找在#content这个div中包含有<img>标签的每一个<p>，然后为它们添加上样式.imgbg。当然你可以去掉前面的#content，这样就会对全局的<p>进行检查，但我不知道这样会不会很浪费呢。
然后在CSS文件（style.css）中添加对imgbg样式的设置：
.imgbg {
background-color: #F0F0F0;
color: #555;
border: 1px solid #CECFD0;
margin-bottom: 10px;
padding-bottom: 6px;
padding-top: 10px;
text-align: center;
}
大功告成！
