前⾔：最近学习到了⼀种超级好看，超级⾼级的背景设计效果，迫不及待的分享出来了适⽤情况：⽤图⽚做背景时，将弹框和背景融为⼀体 ⼀、基础设计（之前的实现⽅法）
页⾯很简单，在外层的div定义background-image放⼊背景图 ⾥层div定义弹框信息放⼊相关⽂字
html代码
<template>
<div class="login-container":>
<div class="login-main">
<div class="normal-font title">WXY的组件库</div>
<div class="normal-font content">希望通过⼀个完整的组件库记录下⼯作学习的收获</div>
<div class="english-font content">“I want to document the gains of work-learing through a complete library of components”</div>
<el-button type="primary"class="button english-font"@click="onEnter">enter</el-button>
</div>
</div>
</template>
css代码
.login-container{
height: 100vh;
background-repeat: no-repeat;
background-color: #6b81ca;
}
.login-main{
position: absolute;
top: 33%;
left: 35%;
width: 35%;
min-height: 370px;美乳人体
min-width: 350px;
max-width: 500px;
background:hsla(0, 0%, 100%, 0.6);
border-radius: 4%;
text-align: center;
}
外层是设计整个图⽚的平铺，⽽不是重复
内层设计了显⽰框的位置以及背景颜⾊等情况
可以看到弹框的内容是可以看到后⾯的背景情况的，这是因为login-mian这个div的样式设置的是半透明的，就是为了达到和背景相呼应的效果，但是也是因为透出了⼀部分背景，所以感觉⽂字不是很清晰，整个页⾯显得很呆板。
hsla – 定义带有透明度的背景颜⾊
hsla(hue, saturation, lightness, alpha)
分别定义颜⾊、饱和度、亮度、不透明度
⼆、进阶设计
仿照苹果的背景设计，实现⼀种背景模糊的效果
实现原理
在原来的基础上，多了⼀个中间的模糊层，从⽽起到了⽑玻璃的效果CSS代码
e159.login-container,
.login-main-two::before{
background:url('../assets/images/background.png') 0 / cover fixed;
交通安全与智能控制
z-index: -1;
}
.login-main-two{
z-index: 5;
position: absolute;
top: 30%;
left: 35%;
width: 500px;
height: 370px;
border-radius: 4%;
童年的发现教学设计
text-align: center;
background:hsla(0, 0%, 100%, 0.3);
color: #f2e2e2;
}
.login-main-two::before{
content:'';
FOS
position: absolute;
top: 0;
right: 0;甘露消毒饮
bottom: 0;
left: 0;
filter:blur(20px);
}
::before层就是实现的模糊层信息
背景图定义层需要同时写⼊外层因为是因为涉及到z轴定位的关系
当出现多种页⾯叠加的情况，就需要引⼊z-index⽤来判断先后顺序，只对定位是absolute、relative、fixed有⽤filter属性提供了⼀种模糊的效果，通常⽤于调整图像，背后和边框的渲染
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议