如何解决需要在Hugo页面中插入图片的帮助吗?
所以我正在使用hugo创建一个网站,并且我想在某个部分放置图片。 enter image description here
所以我想在博客标题后面插入图片代替粉红色bg 我认为该特定部分的代码是
<!-- page-title -->
<section class="section bg-secondary">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h4>{{ .Title }}</h4>
</div>
</div>
</div>
</section>
<!-- /page-title -->
在这段代码中我要怎么做才能在标题后面的那部分插入图片?
解决方法
这里。 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="parent">
<img src="https://images.unsplash.com/photo-1573470271783-0054dcd317fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1791&q=80" alt="">
<div class="text">
Charming evening Field
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.parent {
position: relative;
background-color: pink;
height: 40vh;
font-size: 3vw;
}
.parent img{
padding-top: 2%;
padding-left: 2%;
width:30vw;
height: 30vh;
}
.text {
color: white;
position: absolute;
top: 48px;
left: 26px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。