官方出品的主题都称得上是精品,不少小伙伴都在使用。Twenty Fifteen 主题的使用者不在少数,随手写了这段代码可以让主题实现全站半透明效果。将代码放到主题style.css的结尾。

.hentry,.post-navigation,.comments-area,.site-footer,.page-header {
    background-color: rgba(255, 255, 255, 0.6);
}
button, input[type="button"], input[type="reset"], input[type="submit"]{
    background-color:rgba(51, 51, 51, 0.8);
}
.entry-footer,button, input, select, textarea{
	background-color:rgba(247, 247, 247, 0.6);
}
input:focus,textarea:focus{
	background-color:rgba(247, 247, 247, 0.8);
}
@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: rgba(255, 255, 255, 0.6);
	}
}

透明度可以自行更改,效果如下。

关于半透明

不建议采用opacity的方法,它会让容器中的文字等也半透明。RGBA 颜色值不兼容老旧浏览器(IE8及以下),但个人博客无需考虑老旧浏览器的兼容性。

Comments | 捕获到 2 个小伙伴

上传图片
  1. Tester
    Tester Reply

    的的 的

  2. Tester
    Tester Reply

    ddd

Back