由于背景图片存在一定透明度,但直接使用opacity会导致所有子元素都受到影响,为了实现改效果,采用伪类进行处理,滤镜filter中的透明度设置背景图的opacity。具体代码如下:
html:
<template>
<view class="signCenter">
<view>
</view>
</view >
</template>
css:
.signCenter {
height: 100vh;
}
.signCenter:before {
/*使用before 选择器在被选元素的内容前面插入内容。*/
width: 100%;
height: 100%; /*设置为全屏背景模式*/
background-image: url(https://img.js.design/assets/img/64d06c390ee8cc4ba3fc36e7.png#ff4216ce5abcf508cbd59768dbc53318);
background-size: cover;
// background-attachment: fixed; /*将图片固定*/
position: absolute; /*图片定位*/
top: 0;
left: 0;
content: "";
z-index: -1; /*设置该标签等级,让其始终位于最底层*/
-webkit-filter: opacity(38%); /*设置透明度 blur还可以改变照片的模糊度*/
filter: opacity(38%);
}