[分享]css不规则图片写成一样的

不规则图片设计在网页中非常常见，但是如何让它们在外观上变得相似呢？这就需要使用CSS来实现了。下面，我们就来介绍一些关于将不规则图片写成类似外观的技巧。.background { width: 300...

不规则图片设计在网页中非常常见，但是如何让它们在外观上变得相似呢？这就需要使用CSS来实现了。下面，我们就来介绍一些关于将不规则图片写成类似外观的技巧。

.background {
  width: 300px;
  height: 300px;
  background-image: url('background.jpg');
  position: relative;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('box.jpg');
  z-index: -1;
}

.box:nth-child(1) {
  top: 20px;
  left: 20px;
  transform: rotate(-15deg);
}

.box:nth-child(2) {
  top: 80px;
  left: 110px;
  transform: rotate(20deg);
}

.box:nth-child(3) {
  top: 140px;
  left: 200px;
  transform: rotate(-5deg);
}

.box:nth-child(4) {
  top: 200px;
  left: 60px;
  transform: rotate(40deg);
} 

以上代码中，我们首先定义了一个包含背景图的外层容器，然后再内层插入多个宽高相同的子容器，在每个子容器内部设置相应的偏移和旋转角度等属性，使它们呈现出不规则的图片外观。通过这样的方式，我们就可以使用一些简单的CSS代码，让不规则图片看起来更加统一和协调。