[分享]css3怎么把文字出现在图片上

CSS3能够让我们轻松地在图片上嵌入文字。这是一个非常有用的特性，可以为你的网页增加美观度和多样性。首先，我们需要先用CSS将图片定位到页面上。可以使用以下代码：img { : relative; z...

CSS3能够让我们轻松地在图片上嵌入文字。这是一个非常有用的特性，可以为你的网页增加美观度和多样性。

首先，我们需要先用CSS将图片定位到页面上。可以使用以下代码：

img {
    position: relative;
    z-index: 1;
} 

然后，我们需要使用绝对定位将文字放在图片上。可以使用以下代码：

img {
    position: relative;
    z-index: 1;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
} 

在上面的代码中，我们使用绝对定位让文本相对于图像进行定位，应用于

标签。我们还使用了“transform”属性来使文本向上和向左移动50%，从而使其置于图像的中心。

最后，我们可以为

标签添加一些样式来使它看起来更好看。可以使用以下代码：

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: white;
    font-size: 24px;
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
} 

在上面的代码中，我们使用了一些文本属性来使文本更美观。例如“color”属性可以设置文本颜色，“font-size”属性可以设置文本的大小，“text-shadow”属性可以添加一些文本阴影，从而增加一些特效。

使用上述CSS属性，我们就可以轻松地使文本出现在图片上了。