html+半透明区块,使用CSS3实现高透明度毛玻璃效果的标题区块

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Bungee+Hairline|Open+Sans");

body,

html {

height: 100%;

min-height: 100%;

}

body {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

padding: 30px 0;

background-attachment: fixed;

background-image: url(/uploads/161001/normal4.jpg);

background-size: cover;

background-position: center;

font-family: 'Open Sans', sans-serif;

font-size: .8em;

line-height: 2;

}

.content-blocks {

position: relative;

}

.content-block {

-webkit-box-flex: 0;

-webkit-flex: 0 1 100%;

-ms-flex: 0 1 100%;

flex: 0 1 100%;

max-width: 500px;

padding: 30px;

position: relative;

color: #fafafa;

}

@media (min-width: 850px) {

.content-block {

margin-left: -250px;

}

}

.content-block:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.2);

mix-blend-mode: overlay;

box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);

}

.content-block h2 {

margin: 0;

font-family: 'Bungee Hairline', cursive;

font-size: 6.5em;

line-height: .8;

}

.content-block p {

letter-spacing: 1px;

padding-right: 30px;

}

.content-block--small {

position: absolute;

margin-left: 0;

max-width: 200px;

right: 0;

bottom: -140px;

}

@media (min-width: 850px) {

.content-block--small {

right: -50%;

bottom: -120px;

}

}

.content-block--small p {

padding-right: 0;

}