png图片浮在文字上方用div+css怎样实现

html-css014

png图片浮在文字上方用div+css怎样实现,第1张

你应该是要用在文章页吧?对于这种内容不固定的东西建议使用position定位方式:

一共三个块级元素标签,post为整个文章内容区域,content默认可以只加一个最小高度(如min-width:200px),mark就是那个印章了。

主要原理就是父容器post相对定位(position:relative),印章mark绝对定位(position:absolute),然后就可以随意设置mark的top/bottom和left/right属性来进行定位了,z-index一般不用设置,因为根据文档顺序,后出现的内容会挡住前面的内容。

基本的HTML结构:

<div

class="post">

<div

class="content"></div>

<div

class="mark"></div>

</div>

基本的样式:

<style

type="text/css">

.post

{

position:

relative

}

.content

{

min-width:

200px

}

.mark

{

position:

absolute

top:

100px

right:

50px

width:

150px

height:

150px

background:

url(images/mark.png)

no-repeat

center

center}

</style>

对于IE6的PNG透明问题的简易解决方法是在.mark类中追加

_background:none

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/mark.png"

,sizingMethod="crop")

这两句,如果有问题可以继续...

1.新建画布,点击住矩形工具,之后选择椭圆工具

2.画出一个正圆,方法是同时摁住shift键,这样就会出现正圆,而不是椭圆。把圆的填充去掉。

3.选择左侧菜单中的文字工具,选择其中的路径文字工具

4.将鼠标移动到刚才画出的圆的轮廓上,发现光标改变,之后点击左键,就会发现光标变成文字输入形式,并且是在圆的轮廓上。这样就可以输入你想要的内容。

5.接下来制作印章的外框,画一个正圆,调整描边,颜色,

6.之后制作印章里面的五角星,选择矩形工具里面的星形工具,注意,如果你直接画,你会发现画出来的不是直五角星,画直五角星的方法是同时摁住alt

7.调整一下各个的大小,之后对齐,关于对齐,全选图形,再在其中一个点一下,你会发现那一个变粗了,之后选择各种对齐。(原理是你选中的那个是中心,其他的都是以它为中心对齐。)

8.文字的调节,在窗口-文字-字符,之后就可以调整文字的大小,间距,行距等等。快捷键是CTRL+T