近年來，隨著網頁設計的日益精細化，各種優秀的css技巧也層出不窮。其中，只取中間一塊平鋪css技巧尤其受到了設計師們的喜愛。這種技巧可以讓網頁看起來更加美觀、簡潔，使得信息傳達更加明確。下面，我們來仔細看一看這種令人驚嘆的技巧是如何實現的。

div{
background-image: url(圖片地址);
background-repeat: no-repeat;
background-size: cover;
height: 200px; /*根據設計需要修改*/
}
div:after{
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.2); /*可以根據設計需要修改*/
transform: translateY(50%);
height: 50%;
}

代碼中，我們首先為一個div添加一個背景圖片。然后，利用:after偽元素添加一層覆蓋在圖片上的半透明遮罩。這個遮罩只占整個div一半的高度，并且其垂直方向上居中。通過拉伸或縮小瀏覽器窗口大小，可以看到圖片和遮罩一起平鋪了整個div的區域，但是只有中間部分顯示了遮罩。

用這種技巧，我們可以為網頁添加一些不同尋常的視覺效果，同時還能保持網頁布局的連續性和整潔性。不過，在應用這種技巧時，一定要把握好設計的節奏和重心，以展現出更加優美的視覺效果。