有时候你在博客园添加的图片与网站的周围环境不搭配,比如我的主题是白色的 simpleMemory,如果我在正文中添加许多白色的图片,会发现很难知道网站上的图片边界在哪。
为解决这个问题,可以给图片标签设置边界,首先,你要选择一个合适的边界颜色,比如我觉得我主页外的灰色就不错,如图:
如何查看该颜色?在该灰色部分右击并点击检查,如图:
然后在打开的开发者模式中查看下图部分:
你会发现里面有一个background-color:#e6e6e6
字样,这就是我们要找的颜色了。复制background-color
后面的部分,也就是#e6e6e6
,然后到博客园后台页面定制 CSS 代码
中输入如下代码:
#cnblogs_post_body img {
border:1.5px solid #e6e6e6;
}
#e6e6e6
是我们得到的颜色,#cnblogs_post_body img
在css
中的意思是定位页面中 id 号为 cnblogs_post_body 的标签中的所有 img 标签
,这样写是为了定位正文中的图片,我们必须先定位图片让css
找到它们,然后才能在{}
中设置它们的样式。
还有如果设置后觉得边界太窄,可以增大1.5px
中的数字部分,比如设置成2px
。
接下来,选择保存:
然后页面中的图片就有一个灰色边界了:
这时你可能发现上图中的图片右边并没有显示边界,这是因为边界内边距没设置好。
在页面定制 CSS 代码
中添加
div#cnblogs_post_body {
padding-right: .4em;
}
就可以了。CSS 属性 padding-right 是指一个元素在内边距区域(padding area)中右边的宽度。内边距(padding)是指一个元素的内容和边框之间的区域。