广告位置添加右下角文字标识

显示效果

实现方法

CSS样式代码

把该代码放入主题设置——插入代码——自定义css内;或者放到主题、子主题的样式css文件内

/* 设置图片圆角为10像素 */
.rounded-corner {
    border-radius: 10px;
}

/* 设置广告样式*/
.image-container {
    position: relative;
}

.advertisement {
    position: absolute;
    bottom: 5px; /* 可以根据需要调整位置 */
    right: 0px; /* 调整到右下角,可以根据需要调整位置 */
    background-color: rgba(128, 128, 128, 0.7); /* 设置透明度为0.7的灰色背景 */
    color: white;
    padding: 3px; /* 调整 padding */
    border-radius: 10px; /* 调整圆角 */
    font-size: 13px; /* 调整字体大小 */
}

 广告位代码

在主题设置——广告设置内插入

<div class="image-container">
    <a href="跳转地址">
        <img class="rounded-corner" src="图片地址">
        <div class="advertisement">恰饭广告</div>
    </a>
</div>

 

PS:该代码来自优享云博客,搬运只是方便自用

 

阅读剩余
提示:本文最后更新于2024年1月17日,如有错误或者已经失效,请留言告知。
THE END