如何用CSS样式控制文字浮于图片上方

html-css030

如何用CSS样式控制文字浮于图片上方,第1张

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

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

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

4、随意地放了一张图片用作背景,一定要注意,路径要写对。

5、这样,保存之后文字就会覆盖在图片的上面了。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签,输入js代码:

<div style="background: url(small2.png)height: 60px">

<span style="position: absoluteright: 10px">123</span>

</div>

3、浏览器运行index.html页面,此时文字成功浮动到了图片右上方了。

line-height。

1、通过设置line-height例如line-height:120%。

2、可以font-size:140%,设置字体的大小。

3、letter-spacing:10px,字与字之间的间距是10px距离。以上是css在图片右侧加文字变化宽度,图片会移动的教程。