在CSS 2016中，如何扣圖呢？扣圖通常是指將一張圖片的背景或某個區(qū)域摳出來，讓它變成帶透明度的PNG格式圖片。下面我們來介紹一些扣圖的技巧。

首先，我們需要將圖片放在背景色為純色的容器里，這樣便于我們后續(xù)處理。接著，我們可以使用以下的代碼：

.container {
background-color: #fff;
}
.image {
position: relative;
margin: 0 auto;
display: block;
width: 80%;
max-width: 600px;
height: auto;
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
.image:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
-webkit-mask-image: url(path/to/mask.png);
mask-image: url(path/to/mask.png);
}

上述代碼中，我們使用了偽元素:before和:after來分別覆蓋掉圖片的背景和實(shí)際區(qū)域。其中，before元素的背景色與容器背景色相同，以保證圖片的頂部不會透出顏色。after元素則是將原圖片放置在實(shí)際區(qū)域上，并使用了mask-image屬性來添加蒙版，實(shí)現(xiàn)了圖片的扣出。

當(dāng)然，上述代碼僅適用于背景為純色的情況。如果背景是一個復(fù)雜的圖案或顏色漸變，這種方法就不適用了。這時，我們需要使用其他的方式，例如使用Photoshop等圖像軟件來進(jìn)行處理。處理好后，我們可以使用如下的CSS代碼來展示扣圖效果：

.image {
display: inline-block;
width: 200px;
height: 200px;
background-image: url(path/to/masked/image.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

這段代碼中，我們將扣出來的圖片作為背景，并設(shè)置了背景大小、位置、重復(fù)等屬性，達(dá)到了展示扣圖效果的目的。