Html 如何为z索引处于相对位置的照片创建div文本封面_Html_Css

Html 如何为z索引处于相对位置的照片创建div文本封面

html css

Html 如何为z索引处于相对位置的照片创建div文本封面,html,css,Html,Css,我为我糟糕的英语道歉——我正试着在相对位置为照片写一个文本封面。如果将绝对位置用于封面div：其宽度大于父div .box{ 宽度：600px；保证金：120px自动0px自动； } .李先生{ 浮动：对；宽度：50%； } .封面标题{ 宽度：100%；高度：200px；背景色：rgba（45556852,0.5）；边缘底部：-200px； z指数：1； } .img{ 宽度：100%；高度：200px； z指数：-1； } .img img{ 宽度：100%；高度：200px

我为我糟糕的英语道歉——我正试着在相对位置为照片写一个文本封面。如果将绝对位置用于封面div：其宽度大于父div

.box{
宽度：600px；
保证金：120px自动0px自动；
}
.李先生{
浮动：对；
宽度：50%；
}
.封面标题{
宽度：100%；
高度：200px；
背景色：rgba（45556852,0.5）；
边缘底部：-200px；
z指数：1；
}
.img{
宽度：100%；
高度：200px；
z指数：-1；
}
.img img{
宽度：100%；
高度：200px；
}


这是标题
这是标题

不确定您的视图是什么样子，但您可以检查以下代码：

<!DOCTYPE html>
<html lang="en">
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.box {
    width: 600px;
    margin:120px auto 0px auto;
}
.img-box-li {
    float: right;
    width: 50%;
}
.cover-title {
    width: 100%;
    height: 50px;
    background-color: rgba(455,556,852,0.5);
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    background: greenyellow;
    bottom: -200px;
}
.cover-title p{
    position: relative;
    top:30%;
    left: 10%;
    font-weight: bold;
}
.transparent{
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=60);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.6;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.6;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.6;
}
.img {
    width: 100%;
    height: 200px;
    z-index: -1;
}
.img img {
    width: 100%;
    height: 200px;
}
</style>
<body>
    <div class="box">

    <div class="img-box-li">
        <div class="cover-title transparent">
            <p>THIS IS TITLE</p>
        </div>
        <div class="img">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQplcXd6D9A-MNsUpz9rSLuamsoZj0UltNL4FJtGBSJrFZrbL40&usqp=CAU">
        </div>
    </div>

    <div class="img-box-li">
        <div class="cover-title transparent">
            <p>THIS IS TITLE</p>
        </div>
        <div class="img">
            <img src="https://cdn.pixabay.com/photo/2015/09/16/08/55/online-942408_960_720.jpg">
        </div>
    </div>

</div>
</body>
</html>


演示
正文{字体系列：“Lato”，无衬线}
.盒子{
宽度：600px；
保证金：120px自动0px自动；
}
.李先生{
浮动：对；
宽度：50%；
}
.封面标题{
宽度：100%；
高度：50px；
背景色：rgba（455556852,0.5）；
页边距底部：0；
z指数：1；
位置：相对位置；
背景：绿黄色；
底部：-200px；
}
.封面标题p{
位置：相对位置；
最高：30%；
左：10%；
字体大小：粗体；
}
.透明{
/*IE 5、6、7所需*/
/*…或者触发hasLayout的东西，比如zoom:1*/
宽度：100%；
/*理论上适用于IE 8和9（更有效）*/
/*…但不需要，因为过滤器也可以工作*/
/*应该在过滤器之前*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
/*这也适用于IE8和IE9*/
/*…还有5，6，7*/
过滤器：α（不透明度=60）；
/*早于Firefox 0.9*/
-moz不透明度：0.6；
/*Safari 1.x（WebKit之前的版本！）*/
-khtml不透明度：0.6；
/*现代！
/*Firefox 0.9+、Safari 2？、Chrome有吗？
/*歌剧9+，即9+*/
不透明度：0.6；
}
.img{
宽度：100%；
高度：200px；
z指数：-1；
}
.img img{
宽度：100%；
高度：200px；
}
这是标题
这是标题

在这里，我添加了可能对您有所帮助的代码：-- 这些图像用于示例


这是标题
这是标题
.头衔{
字体大小：25px；
颜色：#fff；
}
.盒子{
宽度：600px；
保证金：120px自动0px自动；
}
.李先生{
浮动：对；
宽度：50%；
}
.封面标题{
宽度：100%；
高度：200px；
背景色：rgba（0,0,0,0.5）；
边缘底部：-200px；
}
.img{
宽度：100%；
高度：200px；
}
.img img{
位置：相对位置；
z指数：-10；
宽度：100%；
高度：200px；
}

请向我们上传您想要实现的目标的图片。