div图片背景虚化不影响图片上的文字_CSS3 使用图片框中的图片加上模糊效果作为背景图...

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

}

.card {

position: relative;

border: 15px solid #000;

box-shadow: inset 0px 0px 10px #000;

}

.card img {

position: absolute;

top: 50%;

left: 50%;

width: 50%;

box-shadow: 2px 2px 5px #000;

border: 15px solid #fff;

-webkit-transform: translatex(-50%) translatey(-50%);

-ms-transform: translatex(-50%) translatey(-50%);

transform: translatex(-50%) translatey(-50%);

}

.card:before {

content: '';

display: block;

width: calc(100vw-30px);

height: 100vh;

-webkit-filter: blur(10px);

filter: blur(10px);

z-index: -2;

}

.card:nth-of-type(1):before {

background: url(http://unsplash.it/1200/1200?random) center center/cover fixed;

}

.card:nth-of-type(2):before {

background: url(http://unsplash.it/1300/1000?random) center center/cover fixed;

}

.card:nth-of-type(3):before {

background: url(http://unsplash.it/1400/1400?random) center center/cover fixed;

}