在线笔记 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>

1026

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

网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
Applebot是什么？
Applebot是由苹果公司开发的网络爬虫（Web Crawler），用于收集和索引互联网上的网页内容。它是苹果公司搜索引擎Apple Search的一部分，...
HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法
在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。为了提高页面的加载速度，讲究点的方法是...
把favinavi网络收藏夹的书签搜索功能做到最好
在此先感谢“changanluan”用户的建议，是他（她）提出了这个问题，favinavi怎么还没有书签搜索功能呢？是啊，我不属于那种要收藏几千个书签的收藏...
css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像）
有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜...
使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。