css盒子中加入图片

CSS 盒子模型可以用于布局网页中的元素，同时还可以在盒子中加入图片进行装饰或者作为背景等。下面是代码示例：

.box {
  border: 1px solid #ccc;
  padding: 20px;
  background-image: url("example.png");
  background-position: center;
  background-size: cover;
}
 

上述代码中，我们创建了一个盒子，设置了边框、内边距和背景图片。其中，“background-image”属性用于设置背景图片的路径，“background-position”用于设置背景图片的位置，此处设置为居中，“background-size”用于设置背景图片的尺寸，此处设置为适应盒子大小。

我们还可以使用“background-repeat”属性来设置背景图片是否重复显示：

.box {
  border: 1px solid #ccc;
  padding: 20px;
  background-image: url("example.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 

上述代码中，我们只需要添加“background-repeat: no-repeat;”即可设置背景图片不重复显示。

除了作为背景，我们也可以在盒子中直接加入图片：

.box img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}
 

上述代码中，我们设置了“img”标签的样式，使其水平居中、宽度占满整个盒子，高度自适应。

以上就是关于在 CSS 盒子中加入图片的示例代码和解释，希望可以帮助大家更好地装饰和布局网页。