又又又折腾了一下首页主图之主图放大效果并带有蒙皮水印图层效果

Author：安。
发布时间：October 13, 2019
2641 views
One comment
4029 words
Categories：软硬兼施

<div class="inner-content" >
<p class="inser-title">Tyecho 折腾杂记</p>
<div class="inster-summary text-muted">
Typecho1. 修改了比较童趣的标签样式&lt;script type=&quot;text/javascri...
</div>
</div>
</a>

</div>

</div>
前段时间折腾过一边首页主图，发现使用水印一个麻烦，而且不是很美观。所以这次又添加的了蒙皮水印的效果。
<div class="tip inlineBlock warning">

效果见本站首页文章主图，各主题结构不同，请自行适配
</div>
查看其他的折腾请自己翻Tag:Typecho看吧
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-aba24912457759702a4f9308154e0ed055" aria-expanded="true"><div class="accordion-toggle"><span>第一版</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-aba24912457759702a4f9308154e0ed055" class="collapse in collapse-content"><p></p>

```

.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}
```

<p></p></div></div></div>
<div class="hideContent">该部分仅登录用户可见</div>

Last modification：January 13, 2022

如果觉得我的文章对你有用，请帮忙点一下上面的广告

One comment

Focuxin
October 20, 2019

留名

Reply

又又又折腾了一下首页主图之主图放大效果并带有蒙皮水印图层效果

安。 • 2019 年 10 月 13 日

效果见本站首页文章主图，各主题结构不同，请自行适配
</div>
查看其他的折腾请自己翻Tag:Typecho看吧
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f2911c9b689063ddc7ea18a844463e9157" aria-expanded="true"><div class="accordion-toggle"><span>第一版</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f2911c9b689063ddc7ea18a844463e9157" class="collapse in collapse-content"><p></p>

```

<p></p></div></div></div>
<div class="hideContent">该部分仅登录用户可见</div>

又又又折腾了一下首页主图之主图放大效果并带有蒙皮水印图层效果

One comment

Leave a Comment Cancel reply

3D打印机无线内存卡 WIFI-SD卡开源部分

映泰hifi h77s bios 添加nvme驱动

Typecho CommentToMail 非常漂亮渐变色邮件样式

3D打印机无线内存卡 WIFI-SD 使用安装说明

解决群晖Video Station 不支持当前所选音频的文件和添加DS Video 豆瓣刮削器

Tyecho 折腾杂记

ESP32 有线接入以太网方法

PlatformIO 更改默认的新项保存目录位置

机械加工常用金属材料及其特性

YUSIEN Yuken油研 Rexroth力士乐 Vickers威格士电磁阀换向阀阀芯机能型号对照表

又又又折腾了一下首页主图之主图放大效果并带有蒙皮水印图层效果