[分享]css中怎么设置图片以九宫格

CSS 中九宫格是一种常见的图片处理方式，特别是在开发网站时，通过将一个大图进行拆分，做成九宫格图片可以帮助我们节省图片大小，提高页面加载速度，同时也保证了图片的清晰度。那么在 CSS 中怎么设置图片...

CSS 中九宫格是一种常见的图片处理方式，特别是在开发网站时，通过将一个大图进行拆分，做成九宫格图片可以帮助我们节省图片大小，提高页面加载速度，同时也保证了图片的清晰度。那么在 CSS 中怎么设置图片以九宫格呢？下面我们来看看代码设置步骤。

 /*首先我们需要设置一个 div 元素用来包含我们的图片*/
    <div class="img-wrap">
        <img src="image.jpg">
    </div>

    /*接下来为该 div 元素添加样式*/
    .img-wrap {
        /*设置宽度和高度*/
        width: 300px;
        height: 300px;

        /*设置背景图片为我们的目标图片*/
        background-image: url(image.jpg);

        /*设置我们需要显示的那个区域*/
        background-position: center center;

        /*设置背景图片平铺方式为只填充图片显示的区域*/
        background-repeat: no-repeat;

        /*以目标图片中心点为界，将其分成九宫格*/
        -webkit-border-image: url(image.jpg) 112 112 112 112 stretch stretch;
        -moz-border-image: url(image.jpg) 112 112 112 112 stretch stretch;
        border-image: url(image.jpg) 112 112 112 112 stretch stretch;
    }

    /*最后，我们为内部的 img 标签添加样式，来隐藏原图*/
    .img-wrap img {
        display: none;
    } 

注意，以上代码中的数字 112 表示将图片的宽高分成九份，而 stretch 表示让图片在被缩放时保持比例不变。如果你需要自定义九宫格的分割线样式，可以通过修改其中的数字来达到你想要的效果。

最后，以九宫格方式显示图片可以适用于各种 Web 应用当中，并且 CSS3 也针对这样的情况提供了更加方便的方法。只需要简单地添加属性 border-image，即可让图片以九宫格的形式铺满整个 div 区域。