css3插入图片 |css3 img 垂直居中

// HTML 代码
<div class="box"></div>
// CSS 代码
.box {
width: 200px;
height: 200px;
background-image: url("image.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

上述代码会创建一个 200px x 200px 的盒子，并将一张名为 “image.jpg” 的图片作为背景图片插入到盒子中，背景大小被设置为 cover，位置居中，不重复。在实际开发中，应该将 “image.jpg” 替换为需要插入的图片文件名，并根据需要调整图片的大小及位置。

CSS3 还提供了一种插入图片的方式——作为元素插入。下面是代码示例：

// HTML 代码
<div class="box"><img src="image.jpg" alt="图片"></div>
// CSS 代码
.box {
width: 200px;
height: 200px;
}
.box img {
width: 100%;
height: 100%;
border-radius: 50%;
}

上述代码会创建一个 200px x 200px 的盒子，并将一张名为 “image.jpg” 的图片作为子元素插入到盒子中。使用 CSS3 的边框属性 “border-radius” 将图片设置为圆形，并根据需要调整图片的大小。这种方式可以让图片更加突出，但也会增加 HTML 代码的复杂度。

总之，CSS3 提供了丰富的插入图片的方式，开发人员可以根据需要选择最适合自己的方式，增强页面的视觉效果。