css中给两个图片设置

在CSS中，我们可以为网页中的图片设置样式，让它们更加美观、易于访问和响应式。下面我们来看一下如何为两个图片设置样式，以达到不同的效果。

/* 第一张图片 */
.img1 {
  width: 50%; /* 设置宽度为父元素的50% */
  display: block; /* 将图片转换为块级元素 */
  margin: 0 auto; /* 居中对齐 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 5px; /* 添加圆角 */
  Box-shadow: 2px 2px 5px #ccc; /* 添加阴影 */
  padding: 10px; /* 添加内边距 */
}

/* 第二张图片 */
.img2 {
  width: 100%; /* 设置宽度为100% */
  height: auto; /* 根据宽度自适应高度 */
  display: block; /* 将图片转换为块级元素 */
  margin-top: 20px; /* 设置上边距为20px */
  filter: grayscale(100%); /* 将图片转换为黑白 */
  opacity: 0.8; /* 设置不透明度为80% */
}

通过上面的代码，我们为第一张图片添加了边框、圆角和阴影效果，并居中对齐，同时添加了内边距美化图片；为第二张图片则添加了黑白效果、透明度调整和上边距设置，使其与第一张图片有所区分。