如何为网页图片添加背景色块？HTML/CSS技术求助

我正在做一个包含图片的网页，现在碰到个问题：没法给图片添加背景色块，想要的效果是每张图片周围都有黄色背景色块。之前试过给section元素设置background-color，但没达到预期。下面是我的HTML和CSS代码，求可行的实现方法：

HTML代码 #

<section class="section">
        <h1>Restaurants in Ipoh</h1>
        <div class="r-container">  
            <div class="r-row">
                <div class="r-col">
                    
                    <p class="restaurants">
                    <a href="#"><img src="Images\lou-wong.jpg" width="500" height="300" /></a> <br>
                    </p>
                    
        
                    <p class="restaurants">
                    <a href="#"><img src="Images\foh-san.jpg" width="500" height="300" /></a> <br>
                    </p>
        
        
                    <p class="restaurants">
                    <a href="#"><img src="Images\tuck-kee.jpg" width="500" height="300" /></a> <br>
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS代码 #

section{
    position: relative;
    bottom: 0;
    top: 50px;
    width: 100%;
}

.r-container {
    max-width: 1200px;
    background-color: #FFEB88;
    margin: auto;
}

.r-row {
    display: flex;
    flex-wrap: wrap;
}

ul {
    list-style: none;
    text-align: center;
}

.section {
    background-color: #FFEB88;
    padding: 10px 0;
    position: relative;
}

.r-col {
    width: 33%;
    padding: 0 10px;
    text-align: center;
}

.restaurants {
    margin-top: 100px;
    margin-bottom: 100px;
}

你之前给section或r-container加背景是给整个区域上色，但目标是每张图片单独带背景色块。直接给包裹图片的.restaurants元素加背景样式就行，修改后的CSS代码如下：

section{
    position: relative;
    top: 50px;
    width: 100%;
}

.r-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px 0; /* 给容器加内边距，避免内容贴边 */
}

.r-row {
    display: flex;
    flex-wrap: wrap;
}

ul {
    list-style: none;
    text-align: center;
}

.section {
    padding: 10px 0;
    position: relative;
}

.r-col {
    width: 100%; /* 若要多列展示，可改回33%，但需调整图片宽度适配 */
    padding: 0 10px;
    text-align: center;
}

.restaurants {
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: #FFEB88; /* 给每个图片容器加黄色背景 */
    display: inline-block; /* 让背景只包裹图片区域，而非整行 */
    padding: 15px; /* 背景与图片间留空隙，更贴合效果 */
    border-radius: 8px; /* 可选，给背景加圆角提升美观度 */
}

.restaurants img {
    display: block; /* 消除图片下方的空白间隙 */
    width: 100%; /* 图片自适应容器宽度，避免超出 */
    max-width: 500px; /* 限制图片最大宽度 */
    height: auto; /* 保持图片原始比例 */
}

核心修改说明 #

• 移除.section和.r-container的背景色，将背景色移至.restaurants，实现单张图片独立背景
• 给.restaurants设置inline-block，让背景仅包裹图片所在区域
• 添加padding让背景与图片间有留白，更接近目标效果
• 调整图片宽度为自适应，同时限制最大宽度，保证不同屏幕下的适配性

内容的提问来源于stack exchange，提问作者Koyomini