在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-06-03 06:06(UTC)

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

注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。

CSS复制代码

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%;
	}
}

html复制代码

<h1>这是一个示例网页</h1>
<p>演示了自适应屏幕的超大背景图片</p>

1878

favinavi - 重度网络用户必备在线笔记

Apache2网站安装开通https协议SSL证书
比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：ht...
CSS3+SVG实现的带音效、会抖动的小铃铛图标特效
非常真实的抖动效果，鼠标移上去还有叮当声哦... 点“演示”按钮体验一下。
php判断浏览器是否支持avif格式图片的一种方法
最新一代图片压缩格式avif非常好，图片缩小体积效果十分明显，各大公司的新版浏览器已经纷纷支持。可是，可是！微软的edge到目前为止（2023-06）还没有...
发现一只有趣的蜘蛛——“BSbot”
最近发现有一个有趣的蜘蛛来访，它的User Agent是这么写的： BSbot 1.1 (monthly copyright check - html/js/...
favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕
这两天把favinavi计划中的基本功能都做完了，虽然还不很完美，但是追求完美总是要有一个前提和基础，就是先搭好框架。目前来看，favinavi的基本框架就...
使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能，就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。在某地政府部门工作的一位领导（这里为了方...