前言

偶尔打开网页的时候，觉得小筑的背景有点太过显眼（和网页内容的对比度太高），影响阅读

想加透明度的时候，发现网页内容也变透明了，╮(￣▽￣”)╭ 

最近在弄Html的时候，发现一个好方法，现在网站背景能设置透明度又不会影响网页内容了…………..✿✿ヽ(°▽°)ノ✿

食用方法

wordpress请将以下代码追加，追加，追加到主题目录下的style.css末尾。一般html食用方法为添加到<style type="text/css"></style>标签中

范例代码以本站为例，给id为kratos-page的div添加背景图（如果不懂的话，建议自行温习css），如果是class的话请用#kratos-page，背景图片为本站随机图片API

.kratos-page:after{
content:"";
display:block;
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
opacity:.5;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
background-image: url(https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302);
}

添加完成后，如果上了CDN的童鞋，记得刷新CDN缓存，因为css默认都是会缓存的。

除了cdn缓存，浏览器还会缓存，请使用Chrome F12并禁用缓存。或者使用Ctrl+F5刷新缓存。

css添加效果

如果使用成功，你就能通过F12按键看到以下效果