登录 注册

有没有代码让题头图下面模糊和修改“添加标签”的触发范围？

刚从 ob 入坑思源的那会儿，因为不习惯思源的题头图所以来论坛求了一段 css，可以自定题头图的大小。后来因为喜欢题头图的模糊感就用了 Asri 主题，但是最近主题更新，样式被调整了，所以想求一段代码使题头图不仅可以自定义大小还可以设置下端模糊。

还有就是有没有办法修改“添加标签”和“添加图标”的触发范围？每次把鼠标放在标题下的导航栏和标题那里，题头图上就会出现这两个设置，我写东西时为了不分心会把所有的“面板”关掉，只留文章，而通过导航切换文章则是我的主要手段，但是现在切换内容都要“忍受”设置的出现，强迫症实在是有点难受，这个东西怎么才能设置成只有把鼠标放在题头图上才会显示？

20250107135337.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23423 引用 • 94765 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8671 引用 • 39535 回帖 • 144 关注
赤峰 位置 6 回帖
3
2
68 56 2 10

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    渐变可以试试这个，具体效果可以自己调节

    .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 无法完美实现，原因如下：

    如图，虽然能实现，头部图片触发，但鼠标无法移入标签和图标那里了。

    r115.gif

    详细原因，如下图所示，要想鼠标可以移入标签和图标，还必须得让标签和图标触发鼠标移入，这样，就和之前效果没什么区别了

    PixPin20250107203215.webp

    虽然，js 能解决，但这个问题不大，建议不用太纠结细节，不是你提到这个问题，还没注意到你说的这个影响，如果纠结细节，思源要改的可多了

6 回帖
有没有代码让题头图下面模糊和修改“添加标签”的触发范围？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 1
    付费者 捐赠者

    渐变可以试试这个，具体效果可以自己调节

    .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 无法完美实现，原因如下：

    如图，虽然能实现，头部图片触发，但鼠标无法移入标签和图标那里了。

    r115.gif

    详细原因，如下图所示，要想鼠标可以移入标签和图标，还必须得让标签和图标触发鼠标移入，这样，就和之前效果没什么区别了

    PixPin20250107203215.webp

    虽然，js 能解决，但这个问题不大，建议不用太纠结细节，不是你提到这个问题，还没注意到你说的这个影响，如果纠结细节，思源要改的可多了

    1 回复
  • 其他回帖
  • nightstars •
    付费者 作者

    感谢大佬的帮助，这样就可以了

  • wilsons • • 1
    付费者 捐赠者

    试试这个，触发范围，如果不满意还可以继续缩小

    .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;
}
    1 回复
  • nightstars • • 1 评论
    付费者 作者

    大佬。好像发生了一点问题，20250107203240.png

    那就把中间 height: 20vh; 改成 height: 30vh;
    Mustakshif •
  • 查看全部回帖
nightstars
赤峰
回帖
70
 帖子
15
 积分
335

近期热议

推荐标签 标签

  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 16 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 750 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1436 引用 • 10059 回帖 • 492 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 2 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 635 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 518 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 104 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    408 引用 • 3575 回帖
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 2 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • Excel
    30 引用 • 28 回帖
  • 分享

    有什么新发现就分享给大家吧！

    247 引用 • 1793 回帖 • 1 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 368 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 175 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    178 引用 • 816 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 320 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    576 引用 • 3533 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 4 关注
  • Anytype
    3 引用 • 31 回帖 • 1 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 399 关注

最新标签