<template>
|
<view>
|
<view class="container">
|
dasdasdas dasd
|
</view>
|
|
<view class="box">
|
<view class="bg1">
|
背景底层
|
</view>
|
<view class="bg2">
|
<view class="bg2-glass"></view>
|
<text class="text">背景上层</text>
|
</view>
|
</view>
|
|
|
<view class="box2">
|
|
</view>
|
|
<view class="box3"></view>
|
|
<view class="box4"></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style>
|
:root {
|
--pcol: #888;
|
}
|
.container {
|
margin: 8px;
|
min-height: 100px;
|
font-size: 40px;
|
color: #ffffff;
|
background-color: #333;
|
filter: blur(.1px); /* 设置滤镜效果 */
|
}
|
.container::before {
|
filter: blur(1px); /* 设置滤镜效果 */
|
margin: 8px;
|
min-height: 100px;
|
}
|
.box {
|
background-color: azure;
|
position: relative;
|
margin: 8px;
|
}
|
.bg1 {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: 48rpx;
|
min-height: 200rpx;
|
background-color: #92cbff;
|
white-space: nowrap;
|
}
|
.bg2 {
|
position: absolute;
|
top: 80px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: 16rpx;
|
min-height: 200rpx;
|
}
|
.bg2-glass {
|
position: absolute;
|
content: '';
|
width: 0;
|
height: 0;
|
top: 20px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border-top: 10px solid transparent;
|
border-left: 10px solid transparent;
|
border-right: 10px solid transparent;
|
border-bottom: 10px solid red;
|
}
|
.bg2::before {
|
position: absolute;
|
content: '';
|
top: 0px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(255, 255, 255, .5);
|
backdrop-filter: blur(4px);
|
border: 1px solid #000;
|
}
|
.text {
|
position: absolute;
|
}
|
.box2 {
|
margin-top: 100px;
|
width: 0px;
|
height: 0px;
|
border: 100px solid transparent;
|
border-bottom-color: red;
|
}
|
.box3 {
|
width: 0px;
|
height: 0px;
|
border-top: 100px solid transparent;
|
border-left: 100px solid gray;
|
border-right: 100px solid transparent;
|
border-bottom: 100px solid gray;
|
}
|
.box4 {
|
width: 100%;
|
height: 100px;
|
background-color: #92cbff;
|
position: relative;
|
margin-top: 30px;
|
}
|
.box4::before {
|
position: absolute;
|
content: '';
|
width: 0;
|
height: 0;
|
top: -20px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border-top: 10px solid transparent;
|
border-left: 10px solid transparent;
|
border-right: 10px solid transparent;
|
border-bottom: 10px solid red;
|
}
|
</style>
|
