两段叠加图像

Question

嗨伙计们！ 在我的项目结束时，我有＆＃34; Oferte speciale＆＃34; ..

我想要那个＆＃34; Esspresso肺 安藤的食物＆＃34;将图像叠加在顶部和＃34; 4lei在loc de 7lei＆＃34;在底部。就像这样：

任何人都可以帮助我吗？ 演示：http://kilometri.ro/brasovtour/bvtour

Answer 1

用这个css替换你的css：

.top-text {
    background-color: #FFFFFF;
    left: 5px;
    line-height: 0.923;
    opacity: 0.7;
    position: absolute;
    top: 5px;
    width: 135px;
}
.oferta {
    border: 2px solid #BFBFBF;
    float: left;
    margin-right: 10px;
    max-width: 145px;
    min-height: 145px;
    position: relative;
}
.bottom-text {
    background-color: #FFFFFF;
    bottom: 5px;
    left: 5px;
    line-height: 0.923;
    opacity: 0.7;
    position: absolute;
    width: 135px;
}

注意：在询问问题时始终包含您的代码。

Answer 2

现在试试这个css

.oferta {
position: relative;
width: 145px;
overflow: hidden;
}
.top-text {
background-color: #ffffff;
opacity: 0.7;
line-height: 0.923;
position: absolute;
z-index: 3;
left: 3px;
right: 3px;
top: 3px;
}
.bottom-text {
background-color: #ffffff;
opacity: 0.7;
line-height: 0.923;
position: absolute;
z-index: 3;
bottom: 3px;
left: 3px;
right: 3px;
}
.oferta img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

结果

Answer 3

您可以尝试这些对您有用的示例

http://codeoverkill.com/question/image-overlay-between-2-paragraph/