4-3 视觉效果 毛玻璃效果_html/css_WEB-ITnose

<div class="mytest">     <p>"The only way to get rid of a temptation is yield to it.Resist it,and your soul grows sick with longing for the things it has forbidden to itself."             <br/>Oscar Wilde,The Picture of Dorian Gray      </p></div>

.test{     position: relative;    width: 400px;    height: 250px;   margin: 0 auto;  background: url("锥头螳螂.jpg") center;  background-size: cover;}

.test p{    width: 330px;    padding: 15px;   //设置文字左右/垂直居中  position: absolute;  left: 50%;    top: 50%;   transform: translate(-50%,-50%);   margin: 0;   //取消p标签的margin  background: hsla(0,100%,50%,.6);  //设置其背景色  color: white;   border-radius: 3px;   overflow: hidden;  //下面具体分析其作用}

.test p::before{     position: absolute;    left: 0;  top: 0;  bottom: 0;  right: 0;      content: '';    background: url("锥头螳螂.jpg");   background-size: cover;     margin: -20px;   //！！这个后面会说明   z-index: -1; //！！这个后面会重点说明   -webkit-filter: blur(20px);   filter: blur(20px);}

background: url("锥头螳螂.jpg") no-repeat center;-webkit-filter: blur(5px);filter: blur(5px);

margin: -20px;

overflow:hidden

background: hsla(274, 100%, 90%, 0.2);

mix-blend-mode: luminosity;