几条简单CSS代码给WordPress评论区设置一个好看得背景

今天，看到WPcom主题群一个好友得网站，评论区挺有意思。当然，我之前也设置了评论区得背景。但是，我的图片不太好看。于是，结合对方与古哥得代码，重新优化了下发布出来。

手把手教学：通过F12审查元素，给你得WordPress评论输入框设置一个好看得背景：

JustNews主题CSS

这里，先给出JustNews主题设置评论区输入框背景得CSS代码如下：

#comment,.comment-must-login {
	background-image:url(https://oss.iymark.com/2021/04/pinglun.jpg);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
#comment:focus {
	background-position-x:800px;
}

其中，第一段的#comment,.comment-must-login表示对id为comment以及class为comment-must-login的元素，设置CSS，CSS里规定了背景图片，背景重复方式，背景图片的位置，以及一个动画延迟时间。其中，id为comment的元素表示justnews主题登录状态看到的评论区；class为comment-must-login的元素表示justnews主题未登录状态看到的评论区。

其中，第二段代码的comment:focus表示，鼠标单击评论区（可以理解为开始输入评论），背景图向右平移800px，移出视野区域。移动速度为.5s，即第一段代码中的最后一行的动画延迟时间。

其他主题CSS

这里，每个主题都有所不同。我只给出如何写代码，具体你写的对不对，我管不着：

打开你的文章页面，鼠标移动到评论区，右击鼠标，点击审查元素。当然，你也可以直接F12打开审查元素，再找到评论区对应的元素。

上图我们以皓月博客为例，尴尬的是发现他的评论区写法跟我的一样，都是id为comment的元素。那么对于这种情况就很简单。所以得到的代码如下：

#comment{
	background-image:url(https://oss.iymark.com/2021/04/pinglun.jpg);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
#comment:focus {
	background-position-x:800px;
}

当然，如果你怕整个页面有很多id为comment的元素，那你再加个标签，优化后的代码如下：

textarea#comment {
	background-image:url(https://oss.iymark.com/2021/04/pinglun.jpg);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
textarea#comment:focus {
	background-position-x:800px;
}

最后，记得修改下背景图片的地址，我这张图片是防盗链的，所以你无法访问。不过为了防止你拿不到图片，我把图片放在下面，供你下载。请点击以下图片，放大后，再点击右键另存为即可。

下载后，替换CSS代码中的background-image:url值即可。

当然，第二部分的其他主题的WordPress的CSS代码，你自己写完可能不包括未登录时的评论区。不过，你可以学我在前面给出的justnews主题的CSS代码写法，照猫画虎，你需要在不登陆你网站的情况下访问文章，找到评论区的元素即可。

最后，放上我的实际效果图如下：

• 已登录状态
• 评论时状态
• 未登录状态

如果你实在不会，下方评论，留下你的网站，我帮你写CSS。