龙三公子博客 - 让自己的内心藏着一条巨龙,既是一种苦刑,也是一种乐趣!
龙三公子博客是一个草根站!一个业余电脑爱好者的独立博客,博客内容综合所有点滴,主要涉及电脑网络、健康养生、日常生活等!

zblog留言和评论框内加入背景图片的方法

    看到好多博客留言框和评论框都加入了个性背景龙三公子也效仿了人家,这不,看上去还挺不错。网上有许多现成的方法,我就直接复制过来了,顺便延伸了一下,方便新手

    打开博客主题文件夹,找到TEMPLATE文件夹里的b_article_commentpost.html文件,打开后找到留言框的代码
<p><label for="txaArticle"><#ZC_MSG055#>(*)(<#ZC_MSG056#>:<#ZC_CONTENT_MAX#>)</label><textarea name="txaArticle" id="txaArticle" class="text"   rows="4" tabindex="5" ></textarea></p>
修改为:
<p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" style="width: 98%;height:150px; background:url(https://www.mybabycastle.com/*.jpg) no-repeat scroll left top; -moz-background-clIP: -moz-inITial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" ></textarea>
    可以通过witdth与height调整留言评论框的大小,通过url(https://www.mybabycastle.com/*.jpg)写你想要添加背景图片的图片地址。修改后保存,然后打开你的留言板或者文字评论部分,看看是不是有效果了呢!

    如果你完全是照我这个代码复制的话,你的结果应该是图片在评论框的左上角,显得很不美观,居中才好看嘛。那么怎么修改呢,让我们来一下:

    其实,主要是设置图片的位置,顺便啰嗦一句,这个图片格式最好是透明模式的图片或动画,比如png或者Gif。例:

background:url(https://www.mybabycastle.com/*.jpg) no-repeat 0 center;的意思是 图像地址 不重复 水平位置0 垂直位置居中

no-repeat 的意思就是 不重复 但是如果评论有时过长有些背景就会露出来,那么还可以设置成repeat-y 向下重复
0 center 的意思就是 水平位置0 垂直位置居中
-4px -3px 的意思就是 水平位置-4px  垂直位置-3px


这两个值和background-position 属性是一样的,即设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
默认值:0% 0%
可能的值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)您可以混合使用 % 和 position 值。

打赏 zblog留言和评论框内加入背景图片的方法  关键词 技巧方法 电脑 程序代码 zblog 博客程序 博客 第1张支付宝打赏 zblog留言和评论框内加入背景图片的方法  关键词 技巧方法 电脑 程序代码 zblog 博客程序 博客 第2张微信打赏
中秋

  • 08-21Zblog二级目录的robots.txt写法 2
  • 04-24zblog1.8升级替换CKeditor编辑器方法 12
  • 08-21zblog安装二级目录出现登陆错误的原因和解决方法 0
  • 05-14zblog调用多说评论框通用代码参数 0
  • 01-06zblog准备升级成2.2步骤梳理 2
  • 02-18zblog出现"错误原因:数据库连接错误"的解决方法 3
  • 标签: 关键词 技巧方法 电脑 程序代码 zblog 博客程序 博客
    分类:主页制作| 发布:xiadao81| 查看:938 | 发表时间:2012-09-15
    原创文章如转载,请注明:转载自龙三公子博客 https://www.mybabycastle.com/
    本文链接:https://www.mybabycastle.com/post/88.html
    footer一直就有个错位,不在同一行,这个我也没找到原因。仔细看了代码的。可能是兼容性问题吧。
    2013-01-17 20:31:07 回复该评论
    我现在也是在用谷歌,只是发现一个问题,就是最新、随机、热门只能显示两篇文章。用的WIN7系统。这个没找到原因。XP下又正常。
    2013-01-17 20:26:31 回复该评论
    能说具体点儿吗?
    2013-01-17 20:24:54 回复该评论
    写得不错,发现博主的网站在用谷歌浏览器时footer会有点错位问题
    footer一直就有个错位,不在同一行,这个我也没找到原因。仔细看了代码的。可能是兼容性问题吧。
    2013-01-17 20:31:07 回复该评论
    我现在也是在用谷歌,只是发现一个问题,就是最新、随机、热门只能显示两篇文章。用的WIN7系统。这个没找到原因。XP下又正常。
    2013-01-17 20:26:31 回复该评论
    能说具体点儿吗?
    2013-01-17 20:24:54 回复该评论
    2013-01-17 20:24:54 回复该评论

    已经有 ( 1 ) 位网友发表了评论,你也评一评吧!  

    Design By XvDesign.Com | Login | Power By Z-BlogPHP 1.5.2 Zero
    点击关闭
    • 联系客服