如何使用 CSS 和 HTML 将文本放入图像中

发布于03月14日

我有一个问题，当把价格值放在背景图片中，因为我把所有的东西都对齐在正确的一边，但我不能让它完全适合.我对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>

结果是如下所示，正如你所见，价格超出了图像，我希望它处于中间.

要运行的完整代码:

<!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;
    }
    .price {
      position: relative;
      left: 40px;
    }
  </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>

如何使用 CSS 和 HTML 将文本放入图像中

推荐答案

要运行的完整代码:

Html相关问答推荐

从网络抓取中提取文本

springBoot + Thymeleaf：基于Locale设置页面语言

VBA从公共Google Drive地址下载文档-.Click事件(？)

Tailwind CSS：overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

如何创建剪切到路径的循环文本字幕？

如何将功能附加到嵌入式药剂中的按钮？

如何显示自定义按钮以将产品添加到WooCommerce购物车？

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

如何居中此按钮，即使它已经在计算机分辨率中居中

四开：如何右对齐 PDF 和 HTML 中的文本

使用 Thymeleaf 将图像水平居中

水平填充容器内的空间

在DIV上应用梯度模糊未如预期工作

如何并排放置部分？

Bootstrap 5 英雄

为什么 `html` 上的 overflow： hidden 将滚动框移动到正文？

如何向弹出窗口添加 sanitize： false 选项？

两个按钮范围滑块的 CSS

所有幻灯片上的 Quarto RevealJS 标题

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘？