如何用CSS和HTML在背景图中放置文本？价格居中适配问题求助

我在将价格值放置到背景图中时遇到问题：所有元素均设置为右对齐，但价格无法完美嵌入背景图，当前价格处于图外，我希望它能居中显示。刚接触CSS和HTML，恳请相关优化建议以提升技能。

原代码 #

<!DOCTYPE html>
<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        body {
            background-image: url('https://www.example.com/background-image.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .postR {
            display: flex;
            flex-wrap: wrap;
            height: 350px;
            width: 700px;
        }

        .postR>div {
            display: flex;
            flex-direction: column;
            flex: 1 1 0%;
        }

        .postR img {
            height: 320px;
            width: 320px;
        }

        .postR>div:last-child>div:last-child {
            text-align: right;
            background-image: url('https://cdn-icons-png.flaticon.com/512/401/401434.png');
            background-repeat: no-repeat;
            background-size: 100px;
            background-position-x:-200%;
            background-position: right;
            color: white;
            padding: 40px;
        }

        .postR>div:last-child>div:last-child>h1 {
            margin: 0;
        }

        .postr h1 {
            color: red;
            text-align: right;
        }
    </style>
</head>

<body>

    <div class="postR">
        <div>
            <div>
                <a href="https://i.ibb.co/NZXX3Pv/product.jpg">
                    <img data-original-height="920" data-original-width="920" src="https://i.ibb.co/NZXX3Pv/product.jpg" />
                </a>
            </div>
        </div>
        <div>
            <div>
                <b>amount | brand</b>
            </div>
            <div>
                <b>Descripción:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div>
                <h1 class="price">$ 35.00</h1>
            </div>
        </div>
    </div>
</body>

</html>

当前效果 #

优化方案 #

• 移除冲突的背景定位属性：删除background-position-x:-200%，这个属性和background-position: right冲突，会导致背景图位置偏移，无法和价格对应。
• 用Flex实现文字居中：修改价格容器的样式，把text-align: right替换为display: flex; justify-content: center; align-items: center;，同时给容器设置width: 100px; height: 100px;（和背景图尺寸一致），这样价格就能在背景图里水平垂直居中。
• 修正类名拼写错误：把.postr h1改成.postR h1（注意大写R），或者直接用.price类控制价格样式，保证选择器生效。
• 调整内边距：移除容器的padding: 40px，避免容器被撑大导致背景图和价格位置不匹配。

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        body {
            background-image: url('https://www.example.com/background-image.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .postR {
            display: flex;
            flex-wrap: wrap;
            height: 350px;
            width: 700px;
        }

        .postR>div {
            display: flex;
            flex-direction: column;
            flex: 1 1 0%;
        }

        .postR img {
            height: 320px;
            width: 320px;
        }

        .postR>div:last-child>div:last-child {
            /* 用Flex实现居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 设置和背景图一致的尺寸 */
            width: 100px;
            height: 100px;
            background-image: url('https://cdn-icons-png.flaticon.com/512/401/401434.png');
            background-repeat: no-repeat;
            background-size: 100px;
            /* 背景图居中显示 */
            background-position: center;
            color: white;
        }

        .postR>div:last-child>div:last-child>h1 {
            margin: 0;
            /* 可以调整字体大小适配背景图 */
            font-size: 18px;
        }

        /* 用.price类精准控制价格样式 */
        .price {
            color: red;
        }
    </style>
</head>

<body>

    <div class="postR">
        <div>
            <div>
                <a href="https://i.ibb.co/NZXX3Pv/product.jpg">
                    <img data-original-height="920" data-original-width="920" src="https://i.ibb.co/NZXX3Pv/product.jpg" />
                </a>
            </div>
        </div>
        <div>
            <div>
                <b>amount | brand</b>
            </div>
            <div>
                <b>Descripción:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div>
                <h1 class="price">$ 35.00</h1>
            </div>
        </div>
    </div>
</body>

</html>

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