html css消息气泡怎么写

html-css011

html css消息气泡怎么写,第1张

<div class="send">

<div class="arrow"></div>

</div>

<style type="text/css">

body {

background:#4D4948

}

.send {

position:relative

width:150px

height:35px

background:#F8C301

border-radius:5px /* 圆角 */

margin:30px auto 0

}

.send .arrow {

position:absolute

top:5px

right:-16px /* 圆角的位置需要细心调试哦 */

width:0

height:0

font-size:0

border:solid 8px

border-color:#4D4948 #4D4948 #4D4948 #F8C301

}

</style>

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

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

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

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

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