.top{ z-index:0; overflow: hidden; background-color: rgb(0,163,175);/*半透明カラーの色*/ } .top::before{ content: ''; background: url('../../assets/img/hogehoge.jpg');/*背景画像のURL*/ opacity: 0.5;/*半透明カラーの透明度*/ filter: blur(8px);/*ぼかし度*/ position: absolute; /* 参考: http://designcolor-web.com/2016/09/14/css-blur-effects-background/*/ top: -8px; left: -8px; right: -8px; bottom: -8px; z-index: -1; }