default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

使用CSS让大背景图片适应不同大小屏幕又一例

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-03 06:06(UTC)

Demo

这个示例网页使用了一个较大的背景图片,并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于或等于768像素的屏幕上,字体大小和位置也会进行相应的调整。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

CSScontent_copyCopy codes
body {
	margin: 0;
	padding: 0;
	background: url('/images/coding/demo_1920x1080.avif') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow-x: hidden;
	font-family: Arial, sans-serif;
	color: #fff;
	text-align: center;
}

h1 {
	font-size: 5em;
	margin-top: 20%;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

p {
	font-size: 2em;
	margin-top: 8%;
	line-height: 1.5;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
	h1 {
		font-size: 3em;
		margin-top: 30%;
	}

	p {
		font-size: 1.5em;
		margin-top: 15%;
	}
}
htmlcontent_copyCopy codes
<h1>这是一个示例网页</h1>
<p>演示了自适应屏幕的超大背景图片</p>

visibility 1634


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel