[子比主题美化教程] – 自定义背景文字介绍的样式代码

温馨提示: 本文最后更新于2025-08-31 21:55:52,某些文章具有时效性,若有错误或已失效,请在下方留言

效果图:

[子比主题美化教程] – 自定义背景文字介绍的样式代码-蛙言网

子比主题文章下面加一个文章介绍的背景样式代码,不仅可以在文章,看自己喜欢哪个地方就加到哪里!

代码教程:

1,CSS代码,放在后台css代码里

/*文章页新增声明*/
 .sys-item-99 {
    background-image: url(背景图片地址1);
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
}
.sys-item-88 {
    background-image: url(背景图片地址2);
    margin-top: 10px;
    height: 40px;
   line-height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
}
/*文章页新增声明*/

图片已经给大家打包好,下载后上次到自己服务器,不喜欢的自己去找其他图片

背景图片

2,html代码,放到自己喜欢的地方即可!!比如文章内容下方.

<div class="sys-item-99"><span>自定义文字内容1</span> </div>
<div class="sys-item-88"><span>自定义文字内容2</span> </div>
© 版权声明
THE END
赞赏