首页›网站源码›正文
给WordPress评论框加上背景图片方法(所有主题通用)

给WordPress评论框加上背景图片方法(所有主题通用)

暂无可下载资源资源正在补充中,敬请期待
💡 温馨提示:建议使用电脑端下载,大文件下载可能需要较长时间,请耐心等待,下载完成后请校验文件完整性。

服务保障

纯净无捆绑

精简优化,纯净系统

安全可靠

多重检测,放心使用

持续更新

长期维护,持续优化

专业制作

系统玩家,品质保证

免费使用

完全免费,长期更新

已通过安全检测无病毒 / 无木马 / 无广告100%纯净资源支持在线校验文件完整性
⚙ 文件校验 MD5 / SHA1 / SHA256
🤖 AI 智能摘要
此内容由 AI 根据文章内容自动生成,并已由人工审核
正在打开 AI 智能摘要...

下载完成了吗?

请问该资源下载顺利吗?使用起来感觉如何?
✓
感谢你的反馈!
我们会持续优化资源质量,为你提供更好的下载体验。

服务协议

文章介绍
发表评论
更新日志
历史版本

一、用图片设计软件自行设计背景图片

并将其透明度调到50%(看个人喜好),上传到服务器或七牛

例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。

二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的Comment.php文件

可以发现评论框是用textarea代码来控制的,并且textarea文本区域对应的CSS样式表ID为comment,因此可以直接到主题样式style.css里找到#comment代码,其作用就是定义评论框的样式。

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件,查找#commentform textarea,你会发现如下类似代码:#commentform textarea {font: 110% Arial, Helvetica, sans-serif;height: 140px;border: solid 1px #999999;padding: 5px 3px 3px 7px;margin-top: -1px;width: 90%;max-width: 90%;}

添加代码修改后:#commentform textarea {background-image:url(图片的地址);background-repeat:no-repeat;background-position:right bottom;font: 110% Arial, Helvetica, sans-serif;height: 140px;border: solid 1px #999999;padding: 5px 3px 3px 7px;margin-top: -1px;width: 90%;max-width: 90%;}

三、说明

background-repeat:no-repeat;是指拉大评论框图片不重复出现;

background-position:right bottom;是指图片与评论框的右、底对齐

background-image:url(图片的地址); background-size:50% 50%;  //  这里可以加一个自适应为了手机端建议为%50

1、background-position:0 0;等于background-position:left top;(左上角)

2、background-position:100% 100%;等于background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等于background-position:center center;(居中显示)

效果如下:图片[1]-给WordPress评论框加上背景图片方法(所有主题通用)-源码库

THE END
© 版权声明
点赞1333 分享
暂无内容
暂无更新日志
暂无内容
暂无历史版本

给WordPress评论框加上背景图片方法(所有主题通用)

一、用图片设计软件自行设计背景图片

并将其透明度调到50%(看个人喜好),上传到服务器或七牛

例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。

二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的Comment.php文件

可以发现评论框是用textarea代码来控制的,并且textarea文本区域对应的CSS样式表ID为comment,因此可以直接到主题样式style.css里找到#comment代码,其作用就是定义评论框的样式。

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件,查找#commentform textarea,你会发现如下类似代码:#commentform textarea {font: 110% Arial, Helvetica, sans-serif;height: 140px;border: solid 1px #999999;padding: 5px 3px 3px 7px;margin-top: -1px;width: 90%;max-width: 90%;}

添加代码修改后:#commentform textarea {background-image:url(图片的地址);background-repeat:no-repeat;background-position:right bottom;font: 110% Arial, Helvetica, sans-serif;height: 140px;border: solid 1px #999999;padding: 5px 3px 3px 7px;margin-top: -1px;width: 90%;max-width: 90%;}

三、说明

background-repeat:no-repeat;是指拉大评论框图片不重复出现;

background-position:right bottom;是指图片与评论框的右、底对齐

background-image:url(图片的地址); background-size:50% 50%;  //  这里可以加一个自适应为了手机端建议为%50

1、background-position:0 0;等于background-position:left top;(左上角)

2、background-position:100% 100%;等于background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等于background-position:center center;(居中显示)

效果如下:图片[1]-给WordPress评论框加上背景图片方法(所有主题通用)-源码库

© 版权声明
THE END
点赞1333 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容