刚从 ob 入坑思源的那会儿，因为不习惯思源的题头图所以来论坛求了一段 css，可以自定题头图的大小。后来因为喜欢题头图的模糊感就用了 Asri 主题，但是最近主题更新，样式被调整了，所以想求一段代码使题头图不仅可以自定义大小还可以设置下端模糊。
还有就是有没有办法修改“添加标签”和“添加图标”的触发范围？每次把鼠标放在标题下的导航栏和标题那里，题头图上就会出现这两个设置，我写东西时为了不分心会把所有的“面板”关掉，只留文章，而通过导航切换文章则是我的主要手段，但是现在切换内容都要“忍受”设置的出现，强迫症实在是有点难受，这个东西怎么才能设置成只有把鼠标放在题头图上才会显示？
渐变可以试试这个，具体效果可以自己调节
.protyle-background__img img {
width: 100%; /* 设置头图宽度 */
height: 20vh; /* 设置头高度 */
/* 上面模糊慢，下面模糊快 */
/* mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.95) 30%,
rgba(0, 0, 0, 0.85) 50%,
rgba(0, 0, 0, 0.7) 65%,
rgba(0, 0, 0, 0.4) 80%,
rgba(0, 0, 0, 0) 100%
); */
/* 过渡较自然 */
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.98) 10%,
rgba(0, 0, 0, 0.95) 20%,
rgba(0, 0, 0, 0.9) 30%,
rgba(0, 0, 0, 0.85) 40%,
rgba(0, 0, 0, 0.75) 50%,
rgba(0, 0, 0, 0.65) 60%,
rgba(0, 0, 0, 0.5) 70%,
rgba(0, 0, 0, 0.35) 80%,
rgba(0, 0, 0, 0.2) 90%,
rgba(0, 0, 0, 0) 100%
);
}
触发范围纯 css 无法完美实现，原因如下：
如图，虽然能实现，头部图片触发，但鼠标无法移入标签和图标那里了。
详细原因，如下图所示，要想鼠标可以移入标签和图标，还必须得让标签和图标触发鼠标移入，这样，就和之前效果没什么区别了
虽然，js 能解决，但这个问题不大，建议不用太纠结细节，不是你提到这个问题，还没注意到你说的这个影响，如果纠结细节，思源要改的可多了
试试这个，触发范围，如果不满意还可以继续缩小
.protyle-background__img img {
width: 100%; /* 设置头图宽度 */
height: 20vh; /* 设置头高度 */
filter:blur(10px); /* 设置头图模糊效果 */
}
/* 设置头图触发范围 */
.protyle-top:hover .protyle-background--enable .protyle-background__action,.protyle-top:hover .protyle-background--enable .protyle-background__img .protyle-icons {
opacity: 0;
}
.protyle-background:hover.protyle-background--enable .protyle-background__action,.protyle-background:hover.protyle-background--enable .protyle-background__img .protyle-icons {
opacity: .86;
}
感谢大佬，图片的大小调整没有问题，只是图片的模糊效果能处理成下图右面的情况吗？就是下端与文章接触的地方出现模糊，还有就是这段代码能设置“触发范围”为题头图的上半部分吗？
下半部分渐隐可以试试这个：
.protyle-background__img::after {
content: "";
display: inline-block;
width: -webkit-fill-available;
height: 20vh;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to top, var(--b3-theme-background) 2%, rgba(from var(--b3-theme-background) r g b / .97) 9%, rgba(from var(--b3-theme-background) r g b / 0.9) 18%, rgba(from var(--b3-theme-background) r g b / .75) 33%, rgba(from var(--b3-theme-background) r g b /.05) 92%, transparent 99%);
pointer-events: none;
}
渐变可以试试这个，具体效果可以自己调节
.protyle-background__img img {
width: 100%; /* 设置头图宽度 */
height: 20vh; /* 设置头高度 */
/* 上面模糊慢，下面模糊快 */
/* mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.95) 30%,
rgba(0, 0, 0, 0.85) 50%,
rgba(0, 0, 0, 0.7) 65%,
rgba(0, 0, 0, 0.4) 80%,
rgba(0, 0, 0, 0) 100%
); */
/* 过渡较自然 */
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.98) 10%,
rgba(0, 0, 0, 0.95) 20%,
rgba(0, 0, 0, 0.9) 30%,
rgba(0, 0, 0, 0.85) 40%,
rgba(0, 0, 0, 0.75) 50%,
rgba(0, 0, 0, 0.65) 60%,
rgba(0, 0, 0, 0.5) 70%,
rgba(0, 0, 0, 0.35) 80%,
rgba(0, 0, 0, 0.2) 90%,
rgba(0, 0, 0, 0) 100%
);
}
触发范围纯 css 无法完美实现，原因如下：
如图，虽然能实现，头部图片触发，但鼠标无法移入标签和图标那里了。
详细原因，如下图所示，要想鼠标可以移入标签和图标，还必须得让标签和图标触发鼠标移入，这样，就和之前效果没什么区别了
虽然，js 能解决，但这个问题不大，建议不用太纠结细节，不是你提到这个问题，还没注意到你说的这个影响，如果纠结细节，思源要改的可多了
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。
你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！
HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。
Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。
昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。
ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。
GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。
子曰：“工欲善其事，必先利其器。”
又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。
这是一个不能说的秘密。
Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。
Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。
SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。
有空闲时间是接外包好呢还是学习好呢？
ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。
Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。
本标签主要用于分享网络空间安全专业的学习笔记
让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
新手上路，请谨慎驾驶！
宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。
Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
Latke 是一款以 JSON 为主的 Java Web 框架。
AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。