html - 响应式div中的响应式图像?
问题描述
我基本上正在建立我的第一个真正体面的网站,我正在创建一个带有一些 css 和图像的背景 atm,我想按照图片中的方式进行操作
.
(已经完成)但它没有响应可能是因为 position: absolute 属性,我想让它正确响应。
这是我用于背景的 HTML 代码
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
- 编辑:我把我的整个网站放在这个patebin上,因为 idk 它不允许我在这里上传它,我得到的片段至少对我不起作用。
解决方案
这应该可以解决问题:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
推荐阅读
- bash - 如何只允许小写字母作为 Bash 中的输入参数
- css - 适合 SVG 的路径
- sql - 将两个查询合并在一起
- mongodb - Mongo聚合查询过滤一个用户的最小数量和记录数的记录
- php - MailChannel 上的 Laravel 通知错误
- angular - 在 JHipster 中拖放重新排序的列表:推荐什么?
- machine-learning - 是否可以在 4 个特征上训练数据并仅使用特征进行测试?
- mysql - 我们如何减去两列并存储在 laravel 的另一列中,我是 laravel 的新手
- pgadmin-4 - 无法在服务器中联系 PgAdmin 4
- postgresql - 使用 activerecord find_or_initialize_by 创建的 2 个条目,后跟 update_attributes