gpt4 book ai didi

html - 如何使 h1 标签响应背景图像(与背景一起,h1 标签收缩和展开)

转载 作者:太空宇宙 更新时间:2023-11-04 10:45:06 25 4
gpt4 key购买 nike

我在 jumbotron 中有一个背景图片以及 h1 标签。当我调整图像大小时,h1 标签没有调整大小,而是与背景中的图像重叠

.jumbotron h1 {
font-size: 45px;
}
.jumbotron {
background-image: url("header.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 0px;
padding-top: 20px;
padding-left: 48px;
padding-right: 48px;
}
<div class="container">
<!-- Jumbotron Header -->
<div>
<header class="jumbotron">
<h1> Hello, how May I help you.</h1>
<h1>Happy to help you<br>
<img src="prime.png" class="img-responsive" alt="flower">
</header>
<div>
</div>

最佳答案

您将不得不使用 javascript 来缩小超大屏幕的字体大小。

如果您当前正在调整整个窗口的大小以缩小图像,那么您只需添加以下内容:

window.addEventListener('resize', function() {

var h1 = document.getElementById("jumbo-h1"); //I made up an id for simplicity
var width = document.getElementsByClassName("jumbotron")[0].offsetWidth;

if (width > 600) {
h1.style['font-size'] = "45px";
} else if (width > 400 && width <= 600) {
h1.style['font-size'] = "35px";
} else {
h1.style['font-size'] = "25px";
}
}

如果您使用的是 jQuery,这会变得更加简洁:

$(window).on('resize',function(){
var $h1 = $(".jumbotron h1"); //note that ID is not needed
var width = $(".jumbotron").width();
if (width > 600) {
$h1.css({"font-size": "45px"});
} else is (width > 400 && width <= 600) {
$h1.css({"font-size": "35px"});
} else {
$h1.css({"font-size": "25px"});
}
});

显然,根据您的喜好调整尺码/分界点以获得您想要的外观。

如果您以其他方式调整超大屏幕的大小,只需将我提供的处理程序中的代码移动到它自己的函数中,并在需要时调用它(同时还传递对窗口调整大小处理程序的引用)

关于html - 如何使 h1 标签响应背景图像(与背景一起,h1 标签收缩和展开),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35471722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com