Online notes favinavi - online bookmark

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

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

Demo

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

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

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

htmlCopy codes

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

1881

favinavi - for heavy web user Online notes

使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。
favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕
这两天把favinavi计划中的基本功能都做完了，虽然还不很完美，但是追求完美总是要有一个前提和基础，就是先搭好框架。目前来看，favinavi的基本框架就...
明明做好了301跳转，为什么某些搜索引擎就是不来收录新站？
favinavi自己就遇到了这个问题，老域名www.favii.cn虽然已有十几年历史，积累了一些忠实粉丝，但是为了能更好的拓展发展空间，还是痛下决心启用了fa...
CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏
纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。
网站的页面访问量以及搜索引擎爬虫访问量的统计方法
统计页面访问量的方法有无数种，这里介绍我的“低级”方法： 1、当然是先用数据库建立一张访问统计表，每个需要统计的页面单独需要建一个字段，比如首页就用“index...
我的酱香之路
一、男人喜欢喝点酒，是一件很正常的事。我其实并不太懂酒，也不算是酒鬼，平时在自己家里基本不喝酒。现在，假如可以选择，那么我只喝酱香酒。咱们中国人，一般来说...