让评论框不再单调,为评论框添加背景图片

2018年1月6日18:01:45 5 5.4K 756字阅读2分31秒

大家有没有觉得自己的WordPress网站评论框太过单调了吗?你想要以下的评论框背景吗?今天就带大家如何实现WordPress评论框背景!让评论框不再单调,为评论框添加背景图片

方法很简单一学就会,是通过CSS修改添加的:

首先由于主题不同,所以我的CSS和大家并不一样!因此,我们需要找到评论框所在CSS!我使用的是知更鸟主题5.2版本,用这个版本的可以直接添加代码使用,其它主题可以参考这个方法。

常见的浏览器高速模式、谷歌浏览器都有审查元素功能,评论框右键”审查元素“;火狐浏览器推荐firebug插件,评论框上右键使用firebug查看元素,当然了,也可以使用浏览器自带的查看元素!

让评论框不再单调,为评论框添加背景图片

找到评论框所使用的id或者class,以我的博客为例,就是comment

让评论框不再单调,为评论框添加背景图片

然后打开您的主题style.css文件,在4830行,找到comment,插入如下代码: 

  1. background-image:url(images/commentbg.png);
  2. background-repeat:no-repeat;
  3. background-position:center center;

如下图:让评论框不再单调,为评论框添加背景图片

其中background-image,表示背景图片的地址,可以是绝对地址,也可以是相对地址(相对于style.css文件来说的,以上代码是相对地址,也就是主题的images;绝对地址就要包含域名的完整路径)
background-repeat,该属性表示是否重复,no-repeat为不重复,默认不重复。重复样式如下图,满满的一大屏。让评论框不再单调,为评论框添加背景图片

background-position,该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。

最后保存,ftp上传style.css到主题文件夹覆盖就可以了!当然还有不要忘了上传背景图片哦!

下面再给大家推荐几个网络上收集的图片:

让评论框不再单调,为评论框添加背景图片 让评论框不再单调,为评论框添加背景图片 让评论框不再单调,为评论框添加背景图片

让评论框不再单调,为评论框添加背景图片

让评论框不再单调,为评论框添加背景图片

让评论框不再单调,为评论框添加背景图片 让评论框不再单调,为评论框添加背景图片

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
知更鸟主题小功能之一:文章添加宽图 WordPress

知更鸟主题小功能之一:文章添加宽图

知更鸟主题小功能之一:文章添加宽图 1、进入文章编辑器,打开“短代码”,找到“综合功能”后选择“添加宽图”。 2、在代码中间位置点击下,插入“媒体文件”。 3、把文章标题复制到“说明”里面。 4、添加...
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:5   其中:访客  3   博主  2
    • 明月登楼 明月登楼 3 来自天朝的朋友 火狐浏览器 Windows 10 浙江省杭州市 阿里云BGP数据中心

      哈哈,真心不错,竟然还提供了背景图片!赞一个!

      • 三夏时光 三夏时光 0 来自天朝的朋友 谷歌浏览器 Windows 7 上海市宝山区 电信

        实用! :mrgreen:
        评论

          • BG4PGR BG4PGR  站长 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省青岛市 移动

            @ 三夏时光 你这背景图片做的好啊,真牛!网站、背景图片浑然一体。

          • 一名优秀的网友 一名优秀的网友 3 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 电信

            手机端会出现错位,这个要改善一下

              • BG4PGR BG4PGR  站长 来自天朝的朋友 火狐浏览器 Windows 10 中国 移动

                @ 一名优秀的网友 手机端可能因为添加的图片,无法做到手机自适应,造成了错位。