css多张图片不同定义 |iconcls css样式名称

/* 定义图片1 */
.img1 {
background-image: url("img1.jpg"); /* 图片路径 */
width: 200px; /* 图片宽度 */
height: 200px; /* 图片高度 */
border-radius: 50%; /* 将图片变成圆形 */
}
/* 定义图片2 */
.img2 {
background-image: url("img2.jpg");
width: 300px;
height: 150px;
border: 2px solid black; /* 给图片添加黑色边框 */
box-shadow: 2px 2px 2px gray; /* 给图片添加阴影效果 */
}
/* 定义图片3 */
.img3 {
background-image: url("img3.jpg");
width: 150px;
height: 300px;
background-size: cover; /* 将图片缩放至宽度与高度完全填充背景 */
background-position: center center; /* 将图片放置于背景中央 */
}

通过上述CSS代码，大家可以清晰的看到，分别定义了三张不同的图片，除了他们的路径不同以外，他们所具有的特征也都不相同。例如，大家可以通过设置样式将其中一张图片变成圆形，将另一张图片添加黑色边框和阴影效果，同时将最后一张图片完全填充背景并放置于中央。

总之，大家可以根据大家的需要将不同的图片定义成不同的表现，这样既可以为页面添加美观的装饰作用，也可以使得页面的结构更加严谨。