css在背景图片中写字

CSS是网页设计中不可缺少的一部分，它可以帮助我们实现各种各样的效果，其中就包括在背景图片中写字。在这篇文章中，我们将介绍如何使用CSS在背景图片中写字。

/*HTML代码*/div class="banner">
    h1>
    Hello, world!/h1>
    /div>
/*CSS代码*/.banner {
    background-image: url("bg.jpg");
    background-size: cover;
    height: 500px;
    position: relative;
}
.banner h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    z-index: 1;
}

首先，我们在HTML中创建一个div元素，并添加一个h1标签。在CSS中，我们为div元素设置背景图片，并确保它的高度足够大以覆盖整个屏幕。我们还将它的位置设置为相对定位，以便在后面更方便地定位h1标签。

接下来，我们使用下面的样式为h1标签添加样式：

.banner h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    z-index: 1;
}
    

我们将它的位置设置为绝对定位，然后将它的顶部和左侧位置都设置为50%。接着，我们使用transform属性将它向左和向上移动了50%的自身宽高，这样它就位于div元素的中心了。此外，我们为它设置了合适的字体大小，以及白色字体和黑色文字阴影，以便它更加醒目。最后，我们将它的z-index属性设置为1，以确保它位于背景图片的上层。

现在，我们的背景图片上就出现了一个可以自由定位的文字，既美观又实用。如果您想改变文字的颜色，大小，字体等样式，只需要调整CSS代码即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！