如果没有进行CSS设置，MT默认模版的图片显示比较单一。你可以进行简单的设置，就可以让图片呈现图片阴影相框。如下图：
1、在css中添加，具体的边框大小、颜色请自己根据模版调整
/* 图片阴影相框*/
.img-bg {
background-image: url(http://bblog.biz/images/shadow.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 4px;
padding: 0px;
position: relative;
}
.img-bg img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
/* 图片居左文字围绕 */
.img_L {
float: left;
margin: 6px 10px 5px 0px;
border: none;
}
/* 图片居右文字围绕*/
.img_R {
float: right;
margin: 6px 0px 5px 10px;
border: none;
}
然后进入 lib/MT/app/CMS.pm
将lib/MT/app/CMS.pm中的
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" border="0" />
HTML
}
修改为
if ($thumb) {
return <<HTML;
<div class="img-bg img_L" style="width: $width px;"><a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" /></a></div>
HTML
} else {
return <<HTML;
<div class="img-bg img_L" style="width: $width px;"><img alt="$fname" src="$url" class="img_L" width="$width" height="$height" border="0" /></div>
HTML
}
以后上传文件的时候就会自动生成如下代码：
<div class="img-bg: img_L" style="width: 200px;"><img alt="pic_css.png" src="http://bblog.biz/upload/images/pic_css.png" width="200" height="200" /></div>
你需要将其中的 style="width: **px; 加上10px 这样显示效果会更好。如果不能修改CMS你可以自己上传图片后添加<div class="img-bg img_L" style="width: **px;"></div>
注意在设置CMS的时候 $width px;之间有空格(如果不加空格会导致CMS无法识别)，当然发文的时候最好把这个空格去掉，否则对显示有所影响。
ps:因为我的模版使用了<?xml version="1.0" encoding="utf-8"?> 所以padding 在IE下无法显示，以至于该相框在本站的显示并不是最好的效果。
Add a Reply