javascript - 我正在尝试将这篇文章附加到照片上作为响应
问题描述
我正在尝试将这篇文章附加到照片中作为响应。我尝试了一些东西,但我做不到:/
HTML
<div class="banner">
<img src="images/banner.jpg" width="100%;">
<div class="banner-text">
<p>HOŞGELDİNİZ!</p>
</div>
</div>
CSS
.banner img {
display: inline;
}
.banner {
position: relative;
display: inline-block;
}
.banner-text {
position: absolute;
top: 20%;
left: 50%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
letter-spacing: 10px;
font-size: 60px;
}
解决方案
您需要使用媒体查询:查看此链接以了解它 https://www.w3schools.com/css/css_rwd_mediaqueries.asp
试试这个代码:
.banner {
position: relative;
}
.banner img {
display: inline-block;
width: 100%;
}
.banner-text {
position: absolute;
width: 100%;
top: 20%;
text-align: center;
color: white;
font-weight: bold;
letter-spacing: 10px;
font-size: 60px;
}
@media only screen and (max-width: 600px) {
.banner-text {
font-size: 40px;
}
}
@media only screen and (max-width: 400px) {
.banner-text {
font-size: 20px;
}
}
<div class="banner">
<img src="images/banner.jpg" width="100%;">
<div class="banner-text">
<p>HOŞGELDİNİZ!</p>
</div>
</div>
推荐阅读
- ios - Framework Not supported in Simulator - Make Dummy Framework
- php - Wordpress:根据价格更改div的内容
- php - laravel 社交名媛 Facebook 登录
- c# - Call MySql stored procedure which take 2 parameters from asp.net core 2.2 web API controller
- javascript - If an element is nested below divs, when do we need to care about div classes when selecting?
- c - C standard library HTTP 301 Redirect using sockets on Objective-C
- php - TypeError:在未使用 $.post() 方法实现接口 FormData 错误的对象上调用了“附加”
- python - 如何使用具有相同范围的 2 个变量进行 for 循环?
- c# - 如何在 ASP.NET MVC 上将 Content-Type 设置为完全“文本/纯文本”?
- azure - 在 Azure APIM 新开发者门户中启用 Azure AD 登录