效果图：

代码部署：

后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式：

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

.box-body.notop {
        background: var(--main-bg-color);
        padding: 5px;
        padding-left: 1.2em;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    
    .title-theme {
        position: relative;
        padding-left: 1.3em;
        font-size: 20px;
        margin: 5px;
    }
    
    .title-theme::before {
        content: '';
        top: -30px;
        width: 50px;
        height: 70px;
        left: -28px;
        background: url(图片链接地址);
        box-shadow: 0 0 black;
        background-size: cover;
    }
    
    .title-theme small {
        font-size: 60%;
        margin-left: 20px;
    }
    
    .title-theme .ml10::before {
        position: absolute;
        content: '';
        width: 1px;
        background: var(--theme-color);
        top: 30%;
        left: 115px;
        bottom: 16%;
    }

第二种演示：

/* 子比主题美化 – 首页自定义动态分类标题开始《轩玮博客》 */
   body.home .box-body.notop {
  background:var(--main-bg-color);
  padding:5px;
  padding-left:1.2em;
  border-radius:10px;
  margin-bottom:10px;
}
body.home .title-theme {
  position:relative;
  padding-left:1.3em;
  font-size:20px;
  margin:5px;
}
body.home .title-theme::before {
  content:'';
  top:-20px;
  width:60px;
  height:60px;
  left:-28px;
  background:url('/wp-content/themes/zibll-child/images/热气球.svg');
  box-shadow:0 0 black;
  background-size:cover;
}
body.home .title-theme small {
  font-size:60%;
  margin-left:20px;
}
body.home .title-theme .ml10::before {
  position:absolute;
  content:'';
  width:1px;
  background:var(--theme-color);
  top:30%;
  left:115px;
  bottom:16%;
}
  
    /* 子比主题美化 – 首页自定义动态分类标题结束 */

 

[/hidecontent]

两个任选其一即可 style标签

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。