[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;
}