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

html-css0253

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

用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>

<div style="float:leftbackground:#f00width:200pxheight:20px"></div>

<div style="float:leftbackground:#000width:200pxheight:20px"></div>

如上的代码,你会发现一个红色的div和一个黑色的div在一行显示出来。

如果去掉他们两个的float,就会显示在两行,红一行,黑一行。

如果你把第二个黑色的div里的float改为clear,即清除左浮动,他们也是两行显示,意思就是说,红色的div左浮动你的,不要影响我。

具体的应用你多玩几次就知道了。

在排版的时候,经常会要两个div并列在一行显示,这种情况就需要用float了;有时他们会影响到别的div,为了让别的div不受到影响,就需要给受到影响的div加一个clear了。

css中图片上浮有字体可以改字体类型吗,css如何修改字体样式?

在CSS中,可以通过font-family属性来修改字体样式。

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称:

指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。

通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"