子比主题美化-文章缩略图封面底部和右上角添加可自定义的文字描述-懒人Blog(资源素材网)

子比主题文章缩略图封面标识功能，底部和右上角添加可自定义的文字描述，带高斯模糊效果，并且可以美观一下自己的缩略图的封面样式，非常使用，暂时仅支持后台编辑时添加

图片[1]-子比主题美化-文章缩略图封面底部和右上角添加可自定义的文字描述-懒人Blog(资源素材网)

/inc/functions/zib-posts-list.php代码

    if (get_post_meta($post->ID, 'mh_text', true)){
        $sticky .= '<style>
              /**文章封面美化开始*/
            .posts-item.card .item-thumbnail {
                background: #c4cffa26;
                width: 100%;
                padding-bottom: var(--posts-card-scale);
            }

            a.item-category {
                position: absolute;
                left: 10px;
                top: 10px;
                padding: 5px 6px;
                font-size: 1rem;
                line-height: 1;
                color: #fff;
                background: rgb(54 117 255 / 19%);
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                border-radius: 6px;
            }

            a.item-category-app {
                position: absolute;
                height: 24px;
                line-height: 24px;
                width: 100%;
                text-align: center;
                bottom: 0;
                left: 0;
                background: radial-gradient(circle,#3783ff,#3783ffbf);
                color: #fff;
                font-size: 12px;
                border-radius: 0 0 10px 10px;
            }

            a.item-category-app-b {
                position: absolute;
                height: 24px;
                line-height: 24px;
                width: 100%;
                text-align: center;
                bottom: 0;
                left: 0;
                background: radial-gradient(circle,#ff5631,#ff5631ba);
                color: #fff;
                font-size: 12px;
                border-radius: 0 0 10px 10px;
            }

            a.item-category-app-c {
                position: absolute;
                height: 24px;
                line-height: 24px;
                width: 100%;
                text-align: center;
                bottom: 0;
                left: 0;
                background: radial-gradient(circle,#464242,#464242ad);
                color: #fff;
                font-size: 12px;
                border-radius: 0 0 10px 10px;
            }

            /**文章封面美化结束*/
            
            /** 壁纸标题毛玻璃 **/
            span.bottom-l {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .n-collect-item-bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 34px;
                background: rgba(0,0,0,.2);
                border-radius: 0 0 4px 4px;
                -webkit-backdrop-filter: saturate(180%) blur(20px);
                backdrop-filter: saturate(180%) blur(20px);
                font-size: 13px;
                color: #fff;
                text-shadow: 0 2px 2px rgba(0,0,0,.16);
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                padding: 0 18px;
                z-index: 5;
            }
            </style>';
        $right = get_post_meta($post->ID, 'right_text', true);
        $bottom = get_post_meta($post->ID, 'bottom_text', true);
        if ($right){
            $sticky .= '<a class="item-category"> '.$right.' </a>';
        }
        if ($bottom){
            $sticky .= '<div class="n-collect-item-bottom"><span class="bottom-l">'.$bottom.'</span></div>';
        }
    }

图片[2]-子比主题美化-文章缩略图封面底部和右上角添加可自定义的文字描述-懒人Blog(资源素材网)

/inc/options/metabox-options.php代码

此处内容已隐藏，请付费后查看

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END