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

html-css0344

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

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

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

3、接着可以通过url()来连接图片,url里面放置的就是背景图片的路径。

4、随意地放了一张图片用作背景,一定要注意,路径要写对。

5、这样,保存之后文字就会覆盖在图片的上面了。

说浮动布局,就得先知道文档流,文档流有 正常文档流 脱离文档流

对应的正常文档流如图,

例如01:

结果:

分析:对div01设置了左浮动,使div01脱离了文档流,div01是在div02的上面一层,实际的div02还是占据了一整行,div02的文字部分看着像被挤出来了,其实这就是文字环绕的实现(文字是英文时有点问题)。

例如02:

只设置后面两个div左浮动

结果:

例如03:

全部设置左浮动,会从左到右依次排列。(right的相反)注意这里出现了父元素高度塌陷,height为0

2.浮动带来的影响

效果如图:对比例3,父元素高度塌陷问题解决

此外,浮动可以用来实现两列布局或多列布局

例如:

结果: