html - CSS - 我想在文本下显示图像
问题描述
我在显示图像时遇到了一些问题。容器具有背景图像并且position
设置为relative
. 容器中有文本。我想显示已position
设置为的图像absolute
。但问题是,如果图像的 z-index 为正,则它会覆盖文本。如果图像的 z-index 为负,则它位于容器的背景图像下方,我看不到图像。
我是 html 和 css 的初学者。所以有人知道可以帮助我吗?我为我糟糕的英语感到抱歉。
.banner {
background: url(../img/Banner-back.png) center center no-repeat;
background-size: cover;
text-align: center;
align-items: center;
justify-content: center;
font-family: Source Han Sans JP;
position: relative;
}
.banner-content {
z-index: 1
}
.creative {
position: absolute;
z-index: 0;
}
.text-shadow {
text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.text-shadow01 {
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.text-shadow02 {
text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
}
.underline-text {
background: url(../img/underline.png) no-repeat;
background-size: 100% 20px;
background-position: bottom;
padding: 0.25rem;
}
.title01 {
font-size: 4.5rem;
}
.title02 {
font-size: 2.8rem;
}
.banner-content {
margin-left: 25vw;
text-align: left;
}
.creative {
width: 43%;
top: 6vw;
right: 40vw;
}
<div class="banner">
<div class="bg-green d-flex align-items-center justify-center">
<div class="banner-left"></div>
<div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
<div class="banner-right"></div>
</div>
<div class="banner-content">
<div><img src="assets/img/Banner01.png"></div>
<div class="h1 mt-4">Promise</div>
<div class="title01 text-green text-shadow01">Hiquality</div>
<div class="title01 text-green text-shadow01">Sample text</div>
<div class="title02 text-shadow02">Sample text</div>
<div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
</div>
<div class="scroll-div">
<img class="scroll-bar" src="assets/img/Scroll-bar.png">
</div>
<div class="creative"><img src="assets/img/creative-team.png"></div>
</div>
解决方案
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.banner {
background: url(../img/Banner-back.png) center center no-repeat;
background-size: cover;
text-align: center;
align-items: center;
justify-content: center;
font-family: Source Han Sans JP;
position: relative;
}
.banner-content {
z-index: 1
}
.creative {
position: absolute;
z-index: 0;
}
.text-shadow {
text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.text-shadow01 {
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.text-shadow02 {
text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
}
.underline-text {
background: url(../img/underline.png) no-repeat;
background-size: 100% 20px;
background-position: bottom;
padding: 0.25rem;
}
.title01 {
font-size: 4.5rem;
}
.title02 {
font-size: 2.8rem;
}
.banner-content {
margin-left: 25vw;
text-align: left;
}
.creative {
width: 43%;
top: 6vw;
right: 40vw;
}
.title03 {
padding: 263px !important;
}
.title01 {
font-size: 4.5rem;
position: absolute;
overflow: hidden;
z-index: 9999;
padding: 108px;
position: absolute;
overflow: hidden;
}
</style>
</head>
<body>
<div class="banner">
<div class="bg-green d-flex align-items-center justify-center">
<div class="banner-left"></div>
<div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
<div class="banner-right"></div>
</div>
<div class="banner-content">
<div><img src="assets/img/Banner01.png"></div>
<div class="h1 mt-4">Promise</div>
<div class="title01 text-green text-shadow01">Hiquality</div>
<div class="title01 title03 text-green text-shadow01">Sample text</div>
<div class="title02 text-shadow02">Sample text</div>
<div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
</div>
<div class="scroll-div">
<img class="scroll-bar" src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg">
</div>
<div class="creative"><img src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg"></div>
</div>
</body>
</html>
我更改了一些 HTML 代码并添加了 CSS 以在图像上显示文本 CSS 更改
.title03 {
padding: 263px !important;
}
.title01 {
font-size: 4.5rem;
position: absolute;
overflow: hidden;
z-index: 9999;
padding: 108px;
position: absolute;
overflow: hidden;
}
在 HTML 中添加了一个名为title03的类
<div class="title01 title03 text-green text-shadow01">Sample text</div>
推荐阅读
- javascript - 状态正在改变我内部的突变
- javascript - 子组件渲染后的启动方法
- git - 克隆 Azure git 存储库报告“无法解析主机”
- java - 使用 IntelliJ IDEA 将 servlet 部署到本地 Tomcat 服务器
- php - 如何替换方括号中的文本以进行数据库更改?
- intellij-idea - 在 IntelliJ 中加载自定义位置列表
- angular - 如何测试使用 Angular 6+ 调用 observable 的拦截器?
- javascript - PHP IF条件内的Javascript反向链接代码
- google-analytics - 优化产品范围查询的性能
- python - 生成器和协程的异步装饰器