方式一
CSS 中难以间接给左上方片加 opacity 特性,能采用下面的方式绕开那个管制:
div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
方式二
冗余两个div浮在相片下面,并增设有效性
body{ background: url("assets/i/bg.jpg"); background-size:100% 100%; background-repeat:no-repeat; } .body_box{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(-160deg, rgba(57,214,239,.8) 0%,rgba(163,103,207,.8) 50%,rgba(248,24,122,.8) 100%) no-repeat; }