[分享]css3张背景图片怎么只拉伸中间的

CSS3提供了很多强大的样式属性，其中一个很有用的属性是backgroundsize。这个属性可以用来控制背景图片的大小及显示方式。默认情况下，背景图片会被拉伸到跟父元素一样大。但是如果我们只想让中间...

CSS3提供了很多强大的样式属性，其中一个很有用的属性是background-size。这个属性可以用来控制背景图片的大小及显示方式。默认情况下，背景图片会被拉伸到跟父元素一样大。但是如果我们只想让中间部分拉伸，该怎么做呢？下面我们就来探讨一下。

background-size: auto auto; /* 宽度和高度都自适应 */
background-size: 100% auto; /* 宽度适应，高度自适应 */
background-size: auto 100%; /* 宽度自适应，高度适应 */
background-size: 100% 100%; /* 宽度和高度都适应 */
background-size: contain; /* 按比例缩小，全部显示 */
background-size: cover; /* 按比例放大，全部裁剪掉 */
background-size: 50% 50%; /* 宽度和高度都缩小一半 */
background-size: 50% auto; /* 宽度缩小一半，高度自适应 */
background-size: auto 50%; /* 宽度自适应，高度缩小一半 */
background-size: 50% 100%; /* 宽度缩小一半，高度不变 */
background-size: 100% 50%; /* 宽度不变，高度缩小一半 */ 

如上所示，我们可以使用background-size属性来设置背景图片的大小及显示方式。其中最重要的是选择background-size: 50% 50%;，即只拉伸中间的部分。

下面是一个示例代码：

<style>
.box {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    background-image: url(https://picsum.photos/id/237/500/300);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

<div class="box"></div> 

以上代码通过background-image属性来设置背景图片，然后使用background-size: 50% 50%;来只拉伸中间的部分。由于我们只拉伸中间的部分，因此该背景图片在宽度和高度上仍然与原图一样。

好了，关于CSS3如何只拉伸背景图片中间部分的讲解就到这里了，希望对大家有所帮助。