发表于： 2019-03-11 23:16:02
1 700
一、今日完成
1、完成了任务5布局：
position：absolute | relative | fixed；
2、学会了flex布局知识：
利用display：flex；实现水平居中 垂直居中等
3、学会了使用伪元素。
4、了解了背景图模糊化。
5、学会背景图前添加透明图层：
二、明日计划
1、学习 CSS Sprite 雪碧图；
2、学习botstrap相关知识；
3、完成任务6基本框架；
三、遇到的问题
背景图的虚化和透明图层的堆积时，连同头像和上面的文字全都虚化了
解决办法：
背景图虚化用 fliter：blur（）；完成虚化；
在背景图的div前添加个伪元素覆盖在其上面
#bgimage:before{
position: absolute;
top: 0;
left: 0;
content: "";
background-color: black;
height: 25vh;
width: 100vw;
opacity: 0.2;
}
再把头像和文字放在一个div中，利用absolute绝对定位脱离文档流
.intro{
color: white;
display: flex;
align-items: center;
position: absolute;
top: 15vh;
left: 5vw;
}
这样头像和文字就不会被虚化了！
返回列表
评论