如何编写CSS将文字显示在图片下方

html-css09

如何编写CSS将文字显示在图片下方,第1张

1、比如我在div里面书写了一些文字,然后想要在放入一张图片,这时候小伙伴可能会直接想到img标签,其实这个想法是错误的。

2、首先,我们应该先给div设置宽度和高度,保证文字有一个范围。

3、然后通过background给div添加一张图片作为它的背景。

4、通过url()来连接图片,url里面放置的就是背景图片的路径。

5、我就随意的放了一张图片用作背景,注意,路径要写对哦。

css圆形按键下方有字可以带提示信息div。步骤如下:

1、新建html文档。

2、书写hmtl代码。

3、书写css公用样式表代码。

4、书写css代码。代码整体结构。

6、查看效果。

一般有两种方法:

一、通过CSS下划线代码:text-decoration:underline来设置文字下划线。

实例演示如下:

1、实例代码如下:

此时页面效果如下:

2、修改第1步中的txt样式,加入text-decoration:underline。

此时页面效果如下,出现了下划线。

二、通过设置div的border实现效果:

实例演示如下:

在第一种方法的初始代码上,增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式,如下:

此时页面效果如下: