一段时间没有使用 typera ，发现打不开，要求更新，然后自己之前修改的 css 主题也显示不了了。

所以在这里存一下。

具体就是：

1. 关于背景图片

:root {/* 背景图片 */background: url("./github/image/miku.jpg") -200px 0px;background-attachment: fixed;/* 侧边栏 */--side-bar-bg-color: rgba(206, 186, 186, 0.05);--control-text-color: #777;
}

2. 关于代码块

透明代码块捏

pre.md-fences {margin-bottom: 20px;background: rgba(206, 186, 186, 0.05);
}

3. 关于字体

感觉要看更舒服的字体，然后网上找了找常用的一个是华康手札体，具体想用什么字体可以自己去找。

然后想让 css 文件识别中文字体的名称可以在文件开头声明文件的编码：

@charset "UTF-8";

具体的编码格式，如果是用 vscode 打开的话是可以在右下角看到的。

然后是在 body 那边更改 font-family，在开头添加：

body {font-family: "Hannotate SC", "华康勘亭流W9(P)", "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;color: rgb(51, 51, 51);line-height: 1.6;
}

如果是使用中文的字体名称，名字是放在

C:\Windows\Fonts

这边里的字体文件的名字。

至于我为什么特意说这个，因为我一开始也很纠结中文字体的名称到底是什么。

还好最后给我试出来了。

字体颜色我改的是 h1~h6 的：

h1,
h2,
h3,
h4,
h5,
h6 {position: relative;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;color: rgb(135, 41, 235);    // 颜色
}

4. 关于做笔记

高亮的语法是

==内容==

要先跑去

标题栏 -> 文件 -> 偏好设置 -> markdown -> markdown 扩展语法 -> 高亮✔

至于我为什么不放图片，因为我懒。

然后随便写一下：

mark{background: rgb(198, 151, 249);
}

然后高亮的背景就变了。

在顺便修改一下选中的字段的背景阴影：

::selection{background-color: rgb(198, 151, 249);
}

5. 关于侧边栏

修改完，但是侧边栏的样式应该是没有变的。

那么就得顺便修改一下。

这个之后再说吧。

可以先调一下自己要放的背景图片的透明度。

我东找找西找找，好像没看到可以单独调背景图片的透明度的，一调就是字的透明度也变了。

调图片透明度可以用平时编辑的 word，放入图片调透明度，再来保存。

我也没想到可以这么做。

下面是自己修改后的。

存在这里，防止丢了。

:root {/* 背景图片 */background: url("./github/image/miku.jpg") -200px 0px;background-attachment: fixed;/* 侧边栏 */--side-bar-bg-color: rgba(206, 186, 186, 0.05);--control-text-color: #777;
}@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);/* open-sans-regular - latin-ext_latin */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: normal;src: local('Open Sans Regular'), local('OpenSans-Regular'), url('./github/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* open-sans-italic - latin-ext_latin */@font-face {font-family: 'Open Sans';font-style: italic;font-weight: normal;src: local('Open Sans Italic'), local('OpenSans-Italic'), url('./github/open-sans-v17-latin-ext_latin-italic.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* open-sans-700 - latin-ext_latin */@font-face {font-family: 'Open Sans';font-style: normal;font-weight: bold;src: local('Open Sans Bold'), local('OpenSans-Bold'), url('./github/open-sans-v17-latin-ext_latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* open-sans-700italic - latin-ext_latin */@font-face {font-family: 'Open Sans';font-style: italic;font-weight: bold;src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('./github/open-sans-v17-latin-ext_latin-700italic.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}html {font-size: 16px;-webkit-font-smoothing: antialiased;
}body {font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;color: rgb(51, 51, 51);line-height: 1.6;
}#write {max-width: 860px;margin: 0 auto;padding: 30px;padding-bottom: 100px;
}@media only screen and (min-width: 1400px) {#write {max-width: 1024px;}
}@media only screen and (min-width: 1800px) {#write {max-width: 1200px;}
}#write > ul:first-child,
#write > ol:first-child{margin-top: 30px;
}a {color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {position: relative;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {text-decoration: none;
}
h1 tt,
h1 code {font-size: inherit;
}
h2 tt,
h2 code {font-size: inherit;
}
h3 tt,
h3 code {font-size: inherit;
}
h4 tt,
h4 code {font-size: inherit;
}
h5 tt,
h5 code {font-size: inherit;
}
h6 tt,
h6 code {font-size: inherit;
}
h1 {font-size: 2.25em;line-height: 1.2;border-bottom: 1px solid #eee;
}
h2 {font-size: 1.75em;line-height: 1.225;border-bottom: 1px solid #eee;
}/*@media print {.typora-export h1,.typora-export h2 {border-bottom: none;padding-bottom: initial;}.typora-export h1::after,.typora-export h2::after {content: "";display: block;height: 100px;margin-top: -96px;border-top: 1px solid #eee;}
}*/h3 {font-size: 1.5em;line-height: 1.43;
}
h4 {font-size: 1.25em;
}
h5 {font-size: 1em;
}
h6 {font-size: 1em;color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table{margin: 0.8em 0;
}
li>ol,
li>ul {margin: 0 0;
}
hr {height: 2px;padding: 0;margin: 16px 0;background-color: #e7e7e7;border: 0 none;overflow: hidden;box-sizing: content-box;
}li p.first {display: inline-block;
}
ul,
ol {padding-left: 30px;
}
ul:first-child,
ol:first-child {margin-top: 0;
}
ul:last-child,
ol:last-child {margin-bottom: 0;
}
blockquote {border-left: 4px solid #dfe2e5;padding: 0 15px;color: #777777;
}
blockquote blockquote {padding-right: 0;
}
table {padding: 0;word-break: initial;
}
table tr {border: 1px solid #dfe2e5;margin: 0;padding: 0;
}
table tr:nth-child(2n),
thead {background-color: #f8f8f8;
}
table th {font-weight: bold;border: 1px solid #dfe2e5;border-bottom: 0;margin: 0;padding: 6px 13px;
}
table td {border: 1px solid #dfe2e5;margin: 0;padding: 6px 13px;
}
table th:first-child,
table td:first-child {margin-top: 0;
}
table th:last-child,
table td:last-child {margin-bottom: 0;
}.CodeMirror-lines {padding-left: 4px;
}.code-tooltip {box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);border-top: 1px solid #eef2f2;
}.md-fences,
code,
tt {border: 1px solid #e7eaed;background-color: #f8f8f8;border-radius: 3px;padding: 0;padding: 2px 4px 0px 4px;font-size: 0.9em;
}code {background-color: #f3f4f4;padding: 0 2px 0 2px;
}.md-fences {margin-bottom: 15px;margin-top: 15px;padding-top: 8px;padding-bottom: 6px;
}.md-task-list-item > input {margin-left: -1.3em;
}@media print {html {font-size: 13px;}table,pre {page-break-inside: avoid;}pre {word-wrap: break-word;}
}html,
body
{background-size: cover
}pre.md-fences {margin-bottom: 20px;background: rgba(206, 186, 186, 0.05);
}#write pre.md-meta-block {padding: 1rem;font-size: 85%;line-height: 1.45;background-color: #f7f7f7;border: 0;border-radius: 3px;color: #777777;margin-top: 0 !important;
}.mathjax-block>.code-tooltip {bottom: .375rem;
}.md-mathjax-midline {background: #fafafa;
}#write>h3.md-focus:before{left: -1.5625rem;top: .375rem;
}
#write>h4.md-focus:before{left: -1.5625rem;top: .285714286rem;
}
#write>h5.md-focus:before{left: -1.5625rem;top: .285714286rem;
}
#write>h6.md-focus:before{left: -1.5625rem;top: .285714286rem;
}
.md-image>.md-meta {/*border: 1px solid #ddd;*/border-radius: 3px;padding: 2px 0px 0px 4px;font-size: 0.9em;color: inherit;
}.md-tag {color: #a7a7a7;opacity: 1;
}.md-toc { margin-top:20px;padding-bottom:20px;
}.sidebar-tabs {border-bottom: none;
}#typora-quick-open {border: 1px solid #ddd;background-color: #f8f8f8;
}#typora-quick-open-item {background-color: #FAFAFA;border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;border-style: solid;border-width: 1px;
}/** focus mode */
.on-focus-mode blockquote {border-left-color: rgba(85, 85, 85, 0.12);
}header, .context-menu, .megamenu-content, footer{font-family: "Segoe UI", "Arial", sans-serif;
}.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state{visibility: visible;
}.mac-seamless-mode #typora-sidebar {background-color: #fafafa;background-color: var(--side-bar-bg-color);
}.md-lang {color: #b4654d;
}/*.html-for-mac {--item-hover-bg-color: #E6F0FE;
}*/#md-notification .btn {border: 0;
}.dropdown-menu .divider {border-color: #e5e5e5;opacity: 0.4;
}.ty-preferences .window-content {background-color: #fafafa;
}.ty-preferences .nav-group-item.active {color: white;background: #999;
}.menu-item-container a.menu-style-btn {background-color: #f5f8fa;background-image: linear-gradient( 180deg , hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}

typora 主题 背景图片 透明代码块相关推荐

  1. CSS中如何实现背景图片透明并且固定和文字不透明效果

    设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位 至于opacity的作用:转化图像的透明程度.值定义转换 ...

  2. 如何实现背景/背景图片透明文字不透明

    如何实现背景/背景图片透明文字不透明 第一种情况,背景为自定义颜色 第二种情况,背景为图片 总结: 第一种情况,背景为自定义颜色 直接给父级背景颜色设置background:rgba();就可以了: ...

  3. 写网页的那些小总结——背景图片透明，背景图片铺满页面

    1.使用opacity属性会让背景图片和盒子中的文字内容都透明,如果想要背景图片透明,文字内容不透明,就可以使用以下代码: 某例子: background: rgba(255,255,255,0.6) ...

  4. html图片滚动红点_HTML中更换或添加网站背景图片的代码怎么写？（示例）

    本篇文章主要介绍了HTML代码中如何更换或添加网站背景图片?对于小白来说,最简单的方法就是,如果是更换背景图片的话. 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码, ...

  5. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览    源码下载 实现的代码. css代码: .jawbone-hero .ja ...

  6. 防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...

    不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...

  7. html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法

    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...

  8. html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？

    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...

  9. 【前端】CSS实现背景图片透明和文字不透明效果

    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...

最新文章

  1. 教你两种黑掉“人工智能”的方法
  2. X86虚拟化之三种服务器虚拟化战略架构
  3. mysql一张表两个索引字段是建两颗独立索引树吗？
  4. file control
  5. Android的***.sh的开机服务添加
  6. 【转】日邮物流：实现智慧物流，这个云上对了！
  7. 面试官 | JVM 为什么使用元空间替换了永久代？
  8. ORACLE--Connect By、Level、Start With的使用(Hierarchical query-层次查询)
  9. Linux检查CPU过高的原因
  10. 【MyBatis笔记】10-多对一左连接查询分步查询（查询所有订单及订单对应的客户）
  11. [原]接上-Linux环境-Jenkins实战-分布式构建-自动化持续集成(二)SVN构建及发布
  12. Pytorch——用nn.Sequential搭建简单的神经网络
  13. thinkphp5 图片压缩旋转_26套经典压缩机结构设计：有多少人知道内部结构是这样的...
  14. 命令行工具恢复文件 foremost 和 extundelete 简介
  15. 关闭445端口方法（解决永恒之蓝病毒）
  16. 计算机控制液位控制系统,计算机控制系统的液位流量串级控制系统设计
  17. 黑科技网站推荐 第一弹 RemoveBg [一键抠图]
  18. C++通过生日判断星座
  19. Linux下的gpt分区
  20. 特殊数字符号整理 - 圆圈数字

热门文章

  1. 机器学习会议期刊比较
  2. 网络测试视频分析软件,移动端用研测试工具推荐一： Userlytics
  3. android定制机测试,在 Android Studio 中利用 “产品定制” 进行封闭测试
  4. 通过ID 删除DIV
  5. OYO酒店回应裁员传闻：绩优者上 不容忍绩效持续不达标
  6. 01文本分析---词频统计(基于jieba分词)
  7. 【数据结构】线性表之单链表
  8. ChatGPT应用场景
  9. 雷电3扩展坞，Thunderbolt3Dock 方案
  10. 标签行内样式中＜style=“--clr:#1e9bff“＞是什么意思?