前段时间折腾过一边首页主图,发现使用水印一个麻烦,而且不是很美观。所以这次又添加的了蒙皮水印的效果。
效果见本站首页文章主图,各主题结构不同,请自行适配

查看其他的折腾请自己翻Tag:Typecho看吧
第一版


.index-post-img a:after{z-index:5;margin-top:0;content:"";background-image:url(https://s2.ax1x.com/2019/10/13/ujcNGt.png);background-repeat:no-repeat;background-size:175px 57px;background-position:center center;height:250px;width:100%;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;transition:all .4s}
#a_d_sidebar img{border-radius:8px;margin-bottom:15px}
ruby{background-color:rgba(146,185,204,.2);margin:4px;padding:0 2px;border-radius:4px}
.b-a{border:1px solid #dee5e7;margin-bottom:20px;background-color:#fff;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.blog-post .post-meta.wrapper-lg{padding-top:15px}
blockquote{border-left:4px solid #5f8bab;background:#edf1f2}
.bg-dark .lt,.bg-dark.lt{background-color:#44495d}
.index-post-img{background:#f4f4f4;clear:both;position:relative;display:block;overflow:hidden;border-radius:6px}
.index-post-img a:after,.index-post-img a:before{position:absolute;visibility:hidden;opacity:0;top:0;left:0}
:root .index-post-img a,_::-webkit-full-page-media,_:future{-webkit-mask-image:-webkit-radial-gradient(ellipse closest-side,#fff,#fff)}
.index-post-img a div{-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;transition:all .2s}
.index-post-img a:before{z-index:2;border-radius:6px;width:100%;height:100%;background:#3a3f51;content:'';-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;transition:all .4s}
.index-post-img a:hover:before{visibility:visible;opacity:.75;-ms-filter:"alpha(opacity=75)";filter:alpha(opacity=75)}
.index-post-img a:hover:after{visibility:visible;opacity:1;-ms-filter:"alpha(opacity=100)";filter:alpha(opacity=100)}
.index-post-img a:hover div{-webkit-transform:scale(1.08);-moz-transform:scale(1.08);transform:scale(1.08)}
.badge{color:#fff;background-color:#7d808e;border-radius:.25em;font-weight:normal}.wrapper-lg{padding:15px 30px;}
.index-post-title a:hover{color:#98a6ad;transition:color .2s linear}
.secret_comment{top:5px}#post-content img{border-radius:8px}


该部分仅登录用户可见

Last modification:January 13, 2022
如果觉得我的文章对你有用,请帮忙点一下上面的广告