css中文字写在图片上怎么写

在网页设计中，有时候需要将文字写在图片上，以达到更好的视觉效果。这种效果可以通过CSS样式来实现。下面我们来看一下如何实现。

.background {
    /* 设置背景图片 */
    background-image: url('example.jpg');
    /* 设置背景图片重复模式 */
    background-repeat: no-repeat;
    /* 设置背景图片的大小 */
    background-size: cover;
    /* 设置背景图片的位置 */
    background-position: center center;
    /* 设置背景图片的滤镜透明度 */
    filter: opacity(0.8);
}
.text {
    /* 设置文字的字体 */
    font-family: Arial, sans-serif;
    /* 设置文字的大小 */
    font-size: 24px;
    /* 设置文字颜色 */
    color: #ffffff;
    /* 设置文字在图片上的位置 */
    position: absolute;
    /* 设置文字在图片上的水平位置 */
    left: 50%;
    /* 设置文字在图片上的垂直位置 */
    top: 50%;
    /* 设置文字的位置与左边缘的距离 */
    transform: translateX(-50%);
    /* 设置文字的位置与顶部的距离 */
    transform: translateY(-50%);
} 

以上代码中，我们通过background-image设置背景图片，通过background-repeat设置不重复，通过background-size设置大小，通过background-position设置位置，通过filter设置透明度。同时，我们用.text类来设置文字的字体、大小、颜色等样式，并通过position:absolute来设定文字的位置，使用left和top来设定文字在图片上的水平和垂直位置，最后通过transform来调整文字的具体位置。

通过这样的样式设置，我们可以轻松地在图片上添加文字效果，进一步提升网页的视觉效果。