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

1882

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

把favinavi网络收藏夹的书签搜索功能做到最好
在此先感谢“changanluan”用户的建议，是他（她）提出了这个问题，favinavi怎么还没有书签搜索功能呢？是啊，我不属于那种要收藏几千个书签的收藏...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
明明做好了301跳转，为什么某些搜索引擎就是不来收录新站？
favinavi自己就遇到了这个问题，老域名www.favii.cn虽然已有十几年历史，积累了一些忠实粉丝，但是为了能更好的拓展发展空间，还是痛下决心启用了fa...
使用Goodsync同步工具遭遇无法解决冲突的状况一例
Goodsync是一个非常好用的同步工具，适用于需要经常同步文件的人，比如程序员，或者业余开发者等等。尤其是其“自动同步”功能，可以说大大地提高了生产率，比以前...
favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕
这两天把favinavi计划中的基本功能都做完了，虽然还不很完美，但是追求完美总是要有一个前提和基础，就是先搭好框架。目前来看，favinavi的基本框架就...
HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法
在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。为了提高页面的加载速度，讲究点的方法是...