css图片上面添加空白框编辑文字

html-css011

css图片上面添加空白框编辑文字,第1张

用CSS往图片上嵌入文字有二种方法,分别如下:

第一种方法、添加一个DIV,采用绝对定位,图片所属DIV为基准。

参考代码如下:

1

2

3

4

5

6

<div style="position:relativewidth:100pxheight:100px">

<img src="" alt="" />

<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">

文字

</div>

</div>

第二种方法、图片作为背景图片。

参考代码如下:

1

2

3

<div style="background:url(abc.jpg) no-repeat left top">

文字

</div>

css插入图片方法如下:

操作设备:戴尔笔记本电脑

操作系统:win10

操作程序:html编辑器v8.21

1、打开html编辑器并创建一个新的html文件。

2、新建完一个新的html文件后,在index.html的<style>标签中,输入如下所示的CSS代码。

3、输入完CSS代码之后,接下来运行index.html页面,可以发现,本地图片通过背景图片衜中的本地路径成功调用为了背景图片,图片就成功加入了。

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。