Css 将一个按钮放入3个图像中

我想在3张图片上加一个按钮。我做了这个：

我认为我的代码在CSS中很长？我经常为每个按钮使用属性

left

，是否正确

我想我可以删除

.button\u red\u 02

和

.button\u red\u 03

在我的HTML代码中，我有：

<section id="contents">
    <div class="background_red">Want to be updated with our offers and news?</div> 
      <div class="background_grey">
         <a href="#" class="button_red_01">Read more +</a>
         <img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
         <a href="#" class="button_red_02">Read more +</a>
         <img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
         <a href="#" class="button_red_03">Read more +</a>
         <img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
    </div>
 </section>

#目录{
位置：绝对位置；
显示：块；
背景色：#CD2122；
顶部：538px；
宽度：100%；
高度：70像素；
}
.背景(红色){
字体系列：开放式Sans，无衬线；
字体大小：22px；
颜色：#fff；
保证金：17px 0px 17px 100px；
}
.背景灰{
显示：块；
位置：绝对位置；
顶部：60px；
身高：80%；
边缘顶部：48px；
左：115px；
}
.background_灰色img{
宽度：30%；
边框：3px实心#BDB9B9；
利润率：10px 16px 10px 0；
}
.按钮\u红色\u 01{
背景色：#cd2122；
边界：无；
颜色：白色；
填充：4px15px 4px15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
光标：指针；
位置：绝对位置；
左：-10px；
顶部：150px；
z指数：1；
字体大小：12px；
字体系列：开放式SAN；
}
.按钮\u红色\u 02{
背景色：#cd2122；
边界：无；
颜色：白色；
填充：4px15px 4px15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
光标：指针；
位置：绝对位置；
左：370px；
顶部：150px；
z指数：1；
字体大小：12px；
字体系列：开放式SAN；
}
.按钮\u红色\u 03{
背景色：#cd2122；
边界：无；
颜色：白色；
填充：4px15px 4px15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
光标：指针；
位置：绝对位置；
右：334px；
顶部：150px；
z指数：1；
字体大小：12px；
字体系列：开放式SAN；
}

想要更新我们的优惠和新闻吗？

一旦您对多个对象具有相同的CSS规范，就可以使用类并将它们分配给所有需要的对象。在您的示例中，您不需要为每个按钮使用相同的CSS，因为它们主要都具有相同的属性

对于定位，我建议为每个按钮添加唯一的ID，以单独处理定位。 请注意，每个ID在html模板中只能使用一次（唯一标识符！）

要选择已分类的对象，请使用

.classname

，要选择ID链接的对象，请使用

#IDname

此外，由于浏览器从上到下读取CSS文件，因此您可以在其ID选择器中更改每个按钮的单个属性，例如

#button_red_01 {
 background-color: blue;
}

有关

类

和

IDs

的更多信息，我强烈推荐MDN资源

#目录{
位置：绝对位置；
显示：块；
背景色：#CD2122；
顶部：538px；
宽度：100%；
高度：70像素；
}
.背景(红色){
字体系列：开放式Sans，无衬线；
字体大小：22px；
颜色：#fff；
保证金：17px 0px 17px 100px；
}
.背景灰{
显示：块；
位置：绝对位置；
顶部：60px；
身高：80%；
边缘顶部：48px；
左：115px；
}
.background_灰色img{
宽度：30%；
边框：3px实心#BDB9B9；
利润率：10px 16px 10px 0；
}
.按钮{
背景色：#cd2122；
边界：无；
颜色：白色；
填充：4px15px 4px15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
光标：指针；
位置：绝对位置；
z指数：1；
字体大小：12px；
字体系列：开放式SAN；
}
#按钮\u红色\u 01{
左：-10px；
顶部：150px；
颜色：#2B28D8；
}
#按钮\u红色\u 02{
左：370px；
顶部：150px；
}
#按钮\u红色\u 03{
右：334px；
顶部：150px；
}

想要更新我们的优惠和新闻吗？

#button_red_01 {
 background-color: blue;
}