文章透明度更改styles文件无效果

[aldol-reaction]

NexT version 8.12.2
博客网址：https://aldol-reaction.github.io/

表格部分行透明部分行不透明。
详见这篇文章效果：https://aldol-reaction.github.io/posts/aa2834e7
插件 [email protected]

今天刚升级了 V8 版本，找了好久没找到解决方案。
我的完整 styles 文件：

body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}
.main-inner {
    opacity: 0.85;
}

body{               //修改主体字体颜色
  color: #000;      //纯黑
}
.posts-expand .post-title-link {    //标题颜色
    color: #000;                //首页文章标题颜色， （默认为灰辨识度不高）
}
.posts-expand .post-meta-container {    //标题下的日期颜色
    color: #880000;             //此处修改为红色，可自行调用rgb调色
}

.main-inner {
    opacity: 1;
}

//侧边框
.sidebar {
  opacity: 0.85;
  border-radius: $border-radius-inner;
}

//菜单栏
.header-inner {
  background: rgba(255,255,255,0.85);
}

//搜索框
.popup {
  opacity: 0.85;
}

//文章内容
.content-wrap {
  opacity: 0.85;
}

//评论区
.comments {
  background: rgba(255,255,255,1);
}

/* 此段代码修改了行高和div溢出隐藏。如果不设置溢出隐藏那么标题的div框会覆盖上下的文字
   这些文字无法选中，链接无法点开，十分影响使用体验 */
h1,h2,h3,h4,h5,h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    overflow: hidden;
}

/* 此段代码修改了六个等级标题、多行引用、行内代码的样式，在颜色和行高字号上产生区分 */
.post-body {
    h1 {
        font-size: 2.25em;
        line-height: 1.2;
        border-bottom: 1px solid #eee;
    }

    h2 {
        background: #2B6695;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-size: 1.95em;
        font-weight: bold;
        height: 40px;
        line-height: 27px;
        margin: 18px 0 !important;
        padding-left: 10px;
        padding-top: 10px;
        text-shadow: 2px 2px 3px #222222;
        opacity: 0.8;
    }
    h3 {
        background: #008080;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-size: 1.60em;
        font-weight: bold;
        height: 40px;
        line-height: 27px;
        margin: 12px 0 !important;
        padding-left: 10px;
        padding-top: 10px;
        text-shadow: 2px 2px 3px #222222;
        opacity: 0.8;
    }
    h4 {
        background: #2B6600;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-size: 1.25em;
        font-weight: bold;
        height: 40px;
        line-height: 27px;
        margin: 12px 0 !important;
        padding-left: 10px;
        padding-top: 10px;
        text-shadow: 2px 2px 3px #222222;
        opacity: 0.8;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
       font-size: 1em;
       color: #777;
    }
}

blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}

strong {
    color: #be0000;
    font-weight: bold;
}

.site-brand-container {
    background: #0054b6;
    opacity: 0.6;

    +tablet() {
    box-shadow: 0 0 16px rgba(0,0,0,0.6);
    }
    +mobile() {
    box-shadow: 0 0 16px rgba(0,0,0,0.6);
    }
}



// 文章内链接文本样式
.post-body p a{
    color: #0593d3;
    border-bottom: none;
    border-bottom: 1px solid #0593d3;
    &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
    }
}

// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection {
    background: #00c4b6;
    color: #f7f7f7;
}
/* firefox */
::-moz-selection {
    background: #00c4b6;
    color: #f7f7f7;
}

// 修改网站头部颜色
.headband {
    height: 3px;
    background: #0054b6;
}
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: #0054b6;
}
.site-subtitle {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

// 修改按键（button）样式
.btn {
    color: #0054b6;
    background: #fff;
    border: 2px solid #0054b6;
}
// 按键（button）点击时样式
.btn:hover {
  border-color: #0054b6;
  color: #fff;
  background: #0054b6;
}

// 鼠标移动至文章标题时的效果
.posts-expand .post-title-link::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0054b6;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

// 菜单栏样式
.header {
    background: #ffffff;
}

//去除菜单项左边icon
//.menu-item .fa {
//    display: none;
//}

//更改菜单项字体大小
.menu-item a, .menu-item span.exturl {
    font-size: 1.025em;
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
    background: #ffffff;
    color: #000;
    font-size: 1.125em;
}

//去掉网站名上下的横线
.logo-line-before i, .logo-line-after i {
    display: none;
}

//更改网站名字体大小
.site-title {
    font-size: 2em;
}
// 菜单栏样式结束

//侧边栏样式
.sidebar {
    background: #bbbbbb1a;
    bottom: 0;
    // position: fixed;
    box-shadow: inset 0 0px 0px #0000;
    top: 0;
    z-index: 200;
}

//目录与站点概览链接样式
.sidebar-nav li{
    font-size: 1em;
}
.sidebar-nav li:hover{
}
.sidebar-nav li.sidebar-nav-overview {
    margin-left: 10px;
}
.sidebar-nav .sidebar-nav-active {
    border-bottom-color: #222;
}
.sidebar-nav .sidebar-nav-active:hover {
    border-bottom-color: #222;
}

//目录样式
.post-toc ol a {
    border-bottom-color: #5550;
}
.post-toc .nav .active-current > a {
    color: #222;
}
.post-toc .nav .active > a {
    border-bottom-color: #222;
    color: #222;
}
.post-toc .nav .active-current > a:hover {
    color: #222;
}

//头像样式
.site-author-image {
    border: 0px solid #333;
}

//name字体颜色
.site-author-name {
    color: #222;
}
//description颜色
.site-description {
    color: #222;
}

//sidebar-item颜色
.sidebar a, .sidebar span.exturl {
    border-bottom-color: #2220;
    color: #222;
}
.sidebar a:hover, .sidebar span.exturl:hover {
    border-bottom-color: #2220;
    color: #22222282;
}

//RSS样式
.feed-link a, .chat a {
    border: 0px solid #fc6423;
}
.feed-link a:hover, .chat a:hover {
    background: #bbbbbb1a;
    border: 0px solid #fc6423;
    color: #222;
}
.fa-feed:before, .fa-rss:before {
    color: #222;
}

//社交链接样式
.links-of-author a::before, .links-of-author span.exturl::before {
    display: none;
}

//展开按钮
.toggle .toggle-line {
    background: #222;
    height: 3px;
}
.sidebar-toggle {
    background: #bbb0;
    height: 20px;
    width: 25px;
}

//侧边栏样式结束

//调节文章宽度
// .main-inner {
//     width: 800px;
// }

//调整子标题文本大小
.site-subtitle {
    font-size: 1em;
}

//调整文章块底部空白大小
.post-eof {
    margin: 20px auto 20px auto;
}

//调整按钮透明度
.btn {
    background: rgba(255,255,255,0);
}

.post-body .note {
    opacity: 0.85;
}

[aldol-reaction]

已解决

[TWe1v3]

怎么解决的

[aldol-reaction]

之前编辑的版本里，前面有一段：

//文章背板的颜色rgb
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{
    background: #f5f5f56b;      //此处使用十六进制颜色代码，         也可以使用rgba进行调色，
                            //实际效果为白色透明色底板              rgba的第四参数即为透明度
}

这里把全局很多部分透明度都覆盖了。前端小白，没注意到。

[MeteorVE]

更推薦使用下面的方式進行更改。
出處 : 連結

舊版的修改方式是在 source/_data/styles.styl 中加入

.post-block {
    background: rgba(255, 255, 255, 0.9);
}

但是新版並不 work，而且打開 F12，會發現它被槓掉了 (被呈現刪除線)。
找了老半天，總之，它是被新版的 main.css 給統一控制了顏色

我們可以觀察到他使用了 var 去控制，這就讓我想到之前看過的一些線索
於是我們去 _config.next.yml 啟用(反註解) variable: source/_data/variables.styl
並且建立一份 /hexo-root/source/_data/variables.styl，填入以下

$content-bg-color = rgba(255, 255, 255, 0.9);

完成 !