[分享]css再图片上面加字

在网页设计中，经常会遇到需要在图片上添加文字的情境。这时候我们可以使用CSS来实现这个效果。下面我们就来看看如何使用CSS在图片上方添加文字。// HTML代码 这是一张图片 // CSS样式 ...

在网页设计中，经常会遇到需要在图片上添加文字的情境。这时候我们可以使用CSS来实现这个效果。下面我们就来看看如何使用CSS在图片上方添加文字。

// HTML代码
<div class="image-container">
    <img src="image.jpg">
    <span>这是一张图片</span>
</div>

// CSS样式
.image-container {
    position: relative;
    display: inline-block;
}

.image-container span {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    padding: 10px;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
} 

首先，在HTML中我们需要将图片和文字放到一个容器中，这里我们使用了一个div元素，并给它一个class名为“image-container”。在div容器中，我们放入了一个img标签和一个span标签。

在CSS样式中，我们给容器div设置了相对定位（position: relative），这是为了让绝对定位的文字可以相对于容器定位。接下来，我们给span标签设置了绝对定位（position: absolute），并将其放到容器div的左上角（top: 0; left: 0;）。我们还给span标签设置了一个背景色（background），以及文字的颜色和大小。最后，我们将img标签设置为块级元素并让其宽度100%。

现在，我们就成功地在图片上方添加了文字。你可以根据需要调整文字和图片的大小以及文字的位置和样式。