css怎么让文字显示在图片的上面

html-css082

css怎么让文字显示在图片的上面,第1张

工具/材料:电脑。

css让文字显示在图片上的操作步骤如下:

1、首先在div里面书写文字,然后放入1张图片。

2、这时应该先给div设置宽度和高度,保证文字有1个范围。

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

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

5、然后放入1张图片用作背景,注意路径正确。

6、最后点击保存,文字就会覆盖在图片上,css让文字显示在图片上的问题就解决了。

假如你的html代码是这样<div class="text">带背景的文字</div>

你的css可以这样写:

.text {

background:url(images/xx.jpg)

}

仅供参考,具体的要看你的需求来改。

我觉得就两种方法吧:

一、把文字做成图片,然后将图片作为背景。当然这样的话文字是没办法动态生成的。

二、把文字层作为底层,上层放内容。

举个例子:

.page{

width:100px

height:100px

position:relative}

.textbg{

position:absolute

left:0px

top:0px

width:100px

height:100px

z-index:-1

color:#999999

}

<div class="page">

<div class="textbg">背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字</div>

<span>内容文字内容文字内容文字</span>

</div>