html+css如何在图片上添加文字

html-css018

html+css如何在图片上添加文字,第1张

可以。

以html为例,步骤:

一、在body中建立文字信息以及图片内容,也就是在header中包含两个同级,图片和文字。

二、在CSS中对文字图片进行简单样式添加,效果如图所示;大盒子使用描边显示,里面包含了图片和下面的文字。

三、想要将文字弄到画面上去,这时候需要对header添加相对定位,对文字标签p添加绝对定位。

四、对文字添加了绝对定位后,如图效果,然后就需要对其设置下位置关系了。

五、位置关系通常就是top  bottom left right 上下左右四个方向了,最后完成了。

这个是after伪对象的应用,对应的还有before伪对象。用来和 content 属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

IE是不兼容这个对象的。

下面是content的语法:content : attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)

取值:

attr(alt) : 使用对象的 alt 属性的文字

counter(name) : 使用已命名的计数器

counter(name, list-style-type) : 使用已命名的计数器并遵从指定的 list-style-type 属性

counters(name, string) : 使用所有已命名的计数器

counters(name, string, list-style-type) : 使用所有已命名的计数器并遵从指定的 list-style-type 属性

no-close-quote : 并不插入 quotes 属性的后标记。但增加其嵌套级别

no-open-quote : 并不插入 quotes 属性的前标记。但减少其嵌套级别

close-quote : 插入 quotes 属性的后标记

open-quote : 插入 quotes 属性的前标记

string : 使用用引号括起的字符串

url(url) : 使用指定的绝对或相对 url 地址

第一步:我们需要准备一个图像

作为一个例子,我想在深色背景的背景上放置白色文字。

第二步:将图像和字母放在一个div元素中

将图像和字母放在一个div标签中。在示例中,将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签,也可以使用span标签。

1

2

3

4

<div class = "example" >

<img src="image/greatwall.jpg">

<p>万里长城</p>

</div>

第三步:指定position属性

为每个元素设置css的position属性。

对作为父元素的div指定为position:relative,以及对包含该字符串的p标签设置为absolute。img标签不动。

把p标签的位置设置为top:0left:0。

为了把图像放在横向上,请指定为img标签的宽度为width : 100%。

1

2

3

4

5

6

7

8

9

10

11

12

.example{/*父元素div*/

position: relative/*相対定位*/

}

.example p {

position: absolute/*绝対定位*/

color: white/*文字设为白色*/

top: 0

left: 0

}

.example img {

width: 100%

}