css 在背景图片上面写文字

CSS 中可以通过设置背景图片，并在其上面写入文字，实现更丰富的视觉效果。

background-image: url("图片链接");
     /* 设置背景图片 */background-color: rgba(0, 0, 0, 0.5);
     /* 设置半透明背景色 */background-blend-mode: multiply;
     /* 设置混合模式 */color: white;
     /* 设置文字颜色 */text-align: center;
     /* 设置居中对齐 *//* 设置字体样式 */font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    font-size: 36px;
    text-shadow: 2px 2px #333;
    /* 设置文字位置 */position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    

在以上代码中，我们通过 background-image 属性设置了背景图片的链接，接着使用 background-color 属性设置了一个半透明的背景色，使得图片与文字更加显眼。使用 background-blend-mode 属性可以进一步调整背景混合模式，以达到更好的视觉效果。

在设置文字样式时，我们考虑到要让文字更加突出，因此选择了粗体字体，并使用了阴影效果。另外，我们还通过 position 属性加上一些调整，让文字置于图片中央。

通过以上 CSS 代码的设置，可以让背景图片上的文字更加突出、美观，从而提升网页的品质和用户体验。

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