css背景9宫格

CSS的背景9宫格是一个非常实用的技巧。9宫格背景图可以让网页在不同大小的屏幕上适应，并且无论网页的大小如何，背景图中的主要元素都不会变形或被拉伸。这种技巧通常用于制作网页的背景、按钮、气泡和其他可拉伸的元素。

要创建一个背景9宫格网格，需要将任何背景图片分成9个部分。这些部分分别是四个角、四个边缘和一个中间矩形。然后，使用CSS的3个属性：background-image、background-repeat和background-position来设置远程背景位置。可以使用9宫格背景图来制作任何形状和大小的元素。

.tile {
  background-image: url('path/to/background-image.png');
  background-repeat: no-repeat;
  background-position: center center;
  padding: 15px 20px 25px 30px;
 /*指定边距，确保不会拉伸或收缩四个角*/
}
.tile-top,
.tile-bottom {
  background-position: center top;
}
.tile-left,
.tile-right {
  background-position: left center;
}
.tile-top-left,
.tile-top-right,
.tile-bottom-left,
.tile-bottom-right {
  width: 30px;
 /*指定四个角的宽度*/
  height: 30px;
 /*指定四个角的高度*/
}
.tile-top-left {
  background-position: left top;
}
.tile-top-right {
  background-position: right top;
}
.tile-bottom-left {
  background-position: left bottom;
}
.tile-bottom-right {
  background-position: right bottom;
}
 

最后，我们只需要在HTML中使用这个div来制作一个9宫格背景图。

<div class="tile tile-top-left tile-top-right tile-bottom-right tile-bottom-left">
  
  <p>这是一个示例文本。</p>
</div> 

这个div包含 5 个不同的类。第一个是 .tile ，这是主要类，定义了这个div的样式。其次是4个边角类：.tile-top-left、.tile-top-right、.tile-bottom-right 和.tile-bottom-left。最后，中间的区域使用 .tile-top、.tile-bottom、.tile-left 和 .tile-right 这四个类来定位它们的位置。

总之，CSS的背景9宫格技巧可以让网页看起来更加专业，而不需要太多的代码或图像编辑技巧。无论你想要制作圆形还是矩形的元素，9宫格技巧都是一种强大而实用的技巧。