橘猫敲代码 2024-04-09 14:08 采纳率: 64.1%
浏览 135
已结题

css背景图上加文字

img

img


图片上加文字，设置为背景图，上边的文字如何随着分辨率的变化位置不乱

  • 写回答

6条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-04-09 14:08
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    问题：如何将文字加到图片上，并设置成背景图时，让文字随着分辨率的变化位置不乱？ 解答：
    1. 首先，需要使用CSS的背景属性，将图片设置成背景图。例如：
    background-image: url('path/to/image.jpg');
    1. 接着，在所需的HTML标签中，添加一个子标签，用于显示文字。例如：
    <div class="bg-image">
  <span class="text">Hello World!</span>
</div>
    1. 使用CSS对文本进行定位和样式设置。重要的是，需要使用绝对位置来设置文本的位置，并使用top和left属性来确定文本的x和y坐标。
    .bg-image {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  position: relative;
  height: 100vh;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  text-shadow: 1px 1px #000;
}

    这个示例代码中，top: 50%和left: 50%将文本定位在其父容器的中心，transform: translate(-50%, -50%)将其移动到正确的位置。 此时，随着分辨率的变化，背景图和文本都将自适应大小，但文本的位置将保持不变。 以下是完整的示例代码：

    <!DOCTYPE html>
<html>
  <head>
    <title>Background Text Example</title>
    <style>
      .bg-image {
        background-image: url('https://i.imgur.com/KAnsx24.jpg');
        background-size: cover;
        position: relative;
        height: 100vh;
      }
      .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        color: white;
        text-shadow: 1px 1px #000;
      }
    </style>
  </head>
  <body>
    <div class="bg-image">
      <span class="text">Hello World!</span>
    </div>
  </body>
</html>
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 8月8日
  • 创建了问题 4月9日