文字在图片定位代码（文字位置代码）

本篇文章给大家谈谈文字在图片定位代码，以及文字位置代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、文字滚动的代码怎么定位到图片的固定位置
• 2、html中怎么让文字在图片的上面？
• 3、dreamweaver怎么固定图片上的文字，（把文字固定在图片的某个位置）？
• 4、css中如何指定文字在图片中的位置?
• 5、如何把文字固定在图片中css代码
• 6、这样的CSS布局代码应该怎么写，文字刚好定位到每张图片的正下方，急呀。。。。

文字滚动的代码怎么定位到图片的固定位置

html

head

title无标题文档/title

/head

body

style

.d1{

width:500px;

height:300px;

background:#CCCCCC;

}

.d2{

display: block;

float:left;

width:200px;

height:100px;

background:#FFFFFF;

margin-top:100px;

margin-left:100px;

}

/style

div class="d1"我是背景

div class="d2"

marqueeddddddddddddddddddddddddddddd定位/marquee》

/div

/div

/body

/html

html中怎么让文字在图片的上面？

1、在div里面书写了一些文字，然后想要在放入一张图片。

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

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

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

5、放一张图片用作背景，注意，路径要写对。

6、保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果。

dreamweaver怎么固定图片上的文字，（把文字固定在图片的某个位置）？

把图片或图片外层HTML标签的样式加:position:relative，在把文字的HTML标签设为绝对定位，即：position:absolute;再用 left:**px;top:**px;来确定具体位置。 如：

div style="position:relative"span style="position:absolute;left:20px;top:20px;"/spanimg src='xxxxxx/xxxxx.jpg'/div

css中如何指定文字在图片中的位置?

有很多种方法可以实现。

随便写几种。

------------------------------

CSS部分：

.text{background-image;url(pic.jpg);

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

overflow:hidden; /*超出部分隐藏*/}

.text span{

margin-top:xx px;/*离上边距离*/

margin-left:xx px;/*离左边距离*/

}

html部分：

div class="text"span字/span/div

------------------------------

CSS部分：

.text{background-image;url(pic.jpg);

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

position:relative;; /*相对定位*/}

.text span{

position:absolute;/*绝对定位*/

top:xx px;/*离上边距离*/

left:xx px;/*离左边距离*/

}

html部分：

div class="text"span字/span/div

--------------------------------------

CSS部分：

.text{background-image;url(pic.jpg);

width: xx px /*注意，这里是你自己定义的宽减去padding-left的值*/

height: xx px /*注意，这里是你你自己定义的高减去padding-top的值*/

padding-top:xx px; /*离上边距离*/

padding-left:xx px; /*离左边距离*/

}

html部分：

div class="text"字/div

lz自己选吧。

如何把文字固定在图片中css代码

把文字固定在图片中css代码，用CSS样式控制文字浮于图片上方，这个我们首先要明确的知道一个层的概念，这里就是将图片为一个层，然后文字又是一个层，然后我们使用一个position定位，将文字定于图片的位置，然后使用z-index这个层属性，来做，z-index的数值越大，层就越在上面，这里通过具体的代码来理解：

html

head

style

.headr{

width:300px;

height:200px;

border:1px

solid

#f00;

z-index:100;

}

.wenzi{

position:absoulte;

left:100px;

//只是假定的值，具体需测量

top:200px;

z-index:101;

z-index的数值越大，层就越在上面

}

/head

body

div

class="headr"

//页头

img

src='图片的地址'

/div

div

class='wenzi'

p我会在图片的上面/p

/div

/body

/html

这样的CSS布局代码应该怎么写，文字刚好定位到每张图片的正下方，急呀。。。。

每个图和文字结合为一个li。

然后li里再分图和文字，这里文字就直接用a标签也可以，反正它最后是链接的。

如：

div

ul

liimg src="images/img01.jpg" /a href="#"雷朋经典眼镜/a/li

liimg src="images/img02.jpg" /a href="#"型男风尚短T/a/li

liimg src="images/img03.jpg" /a href="#"数码讲价疯抢/a/li

liimg src="images/img04.jpg" /a href="#"珍珠4折起/a/li

liimg src="images/img05.jpg" /a href="#"原价出口包包/a/li

liimg src="images/img06.jpg" /a href="#"淘妆性感上线/a/li

/ul

/div

这样布局。

然后在定li的宽度。。。

但是这样的话图片还要去写一次链接。所以还有种方法就是。

ul

lia href="#"img src="images/img01.jpg" /span文字描述/span/a/li

/ul

这个和楼上的差不多，但是楼上的是加的P ，我不建议那么做，因为span是内敛标签，P是块级标签。

文字在图片定位代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于文字位置代码、文字在图片定位代码的信息别忘了在本站进行查找喔。