[html+css]在图片上添加div

在做前端时,有时需在图片上添加文字、图片甚至div。这里总结了两种常用方法。


设置背景

直接在该div中添加背景稍作设置即可。

1
<div class="words">words</div>

words的css。

1
2
3
4
5
6
7
8
.words {
width: 100%;
height:800px;
background-image: url(bg.jpg);
background-size: 100% 100%;
background-repeat:no-repeat;

}

这里顺带一提,div大小不会随着背景的大小而改变大小,因此要显示图片必须要设定div的高度,因此最好还是使用加<span>标签的方法。


标签

例如,在一个充满屏幕的banner右上角添加文字。
要用一个div作为总容器。

1
2
3
4
<div class="title">
<img class="banner" src="banner.jpg" alt=""/>
<span class="words">words</span>
</div>

title和words的css,words的堆叠值z-index要大于banner,position要设为absolute

1
2
3
4
.title {
width: 100%;
position: relative;
}

1
2
3
4
.banner {
width: 100%;
z-index: 5;
}
1
2
3
4
5
6
.words {
position: absolute;
top: 75px;
right: 75px;
z-index: 10;
}