你好，这个需要使用媒体查询来实现。
.gridContainer {
margin-left: auto
margin-right: auto
width: 86.45%
}
.img { width:50%}
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%
padding-left: 1.1625%
padding-right: 1.1625%
}
.img { width:60%}
}
@media only screen and (min-width: 769px) {
gridContainer {
width: 88.5%
max-width: 1232px
}
.img { width:80%}
}
这个css是无法实现局部模糊的，所以做不到，但是有一点可以做到就透明.xx{background:rgba(255,255,255,0.4)}这样就是一个背景色为白色 透明度为50%的效果了但是IE9一下不支持这种写法，模糊也是:
.blur {
filter: url(blur.svg#blur)/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px)/* Chrome, Opera */
-moz-filter: blur(10px)
-ms-filter: blur(10px)
filter: blur(10px)
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)/* IE6~IE9 */
}
那个效果一个是窗口区域背景模糊，一个是窗口区域窗口半透明。 背景模糊可以做，但是背景局部模糊办不到
css设置一张图拉伸填满整个窗口，我们可以通过给这个图片设置width，height都给他们100%的高度和宽度，然后在就能看到填满全屏了，举个例子：<html>
<head>
<style>
.class{
width:100%//通过class来控制
height:100%
}
</style>
</head>
<body>
<div id='content'>
<div class='img'>
<img src='图片地址'>
</img>
</div>
</body>
</html>
