图片全屏覆盖

我们可能希望实现图片的全屏覆盖，这种覆盖是随着网页大小而调整的，而不是固定的，怎么做呢？

请看以下CSS代码：

body{background:url("img.jpg") no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}

效果展示：

文本水平垂直居中

<center>标签可以居中，但早已不被建议使用，实现居中应该使用CSS实现。

下面的CSS代码实现的不仅仅是水平、垂直双居中，而且是兼容网页变化的实现：

div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

效果展示：

文本自适应缩放

上面的文本字体大小设计，看似还行，但如果我们把浏览器缩小，会看到：

此时文本文字就显得过大，我们必须要尽量做到自适应。
在网上查了些资料，发现必定都是大神，因为根本就不详细说，也没有代码说明，对读者极不友好，那就只能自己研究了。

说结论之前，先推荐一篇文章：《网页字体单位px、em、%、rem、pt、vm、vh介绍》

读过这篇文章，我决定改选vw作为字体大小单位，经过测试，选择2vw（10vw太大，0,1vw太小）。

div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size:2vw;color:#a8e346;
}

效果：

可以看出：基本算是实现了自适应。

另外，在网上看到这么一段代码，感兴趣的可以自己去试试：

<script type="text/javascript" >//网页字跟随页面自动变化function setRem(){//获取当前页面的宽度var width = document.body.offsetWidth;//设置页面的字体大小var nowFont=width/375*20;//通过标签名称来获取元素var htmlFont=document.getElementsByTagName('html')[0];// 给获取到的元素的字体大小赋值htmlFont.style.fontSize =nowFont+"px";}setRem();//监听屏幕变化window.οnresize=setRem;
</script>

本文完整网页源码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"><title>赏金猎人</title><style>body {background:url("img.jpg") no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size:2vw;color:#a8e346;}</style></head><body><div><h1>这是一段普普通通的文本</h1></div></body>
</html>

【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放相关推荐

全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
小伙子用C++代码打造全屏幻灯片图片显示特效！成功拿到offer
今天我们想分享一个平面的c++电子杂志布局与"翻页"动画特效.导航时,内容被覆盖,然后显示下一页.根据页面之间的距离(在从菜单中选择页面时),我们将显示多个元素来覆盖内容,从而创建 ...
网页html 图片横向摆放,css实现多张图片横向居中显示的方法
先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分分类小贴士 CSS部分 .main{ width:100%; margin-top:40px; } .main .tag{ margin: ...
Android WebView 视频播放，全屏按钮不显示或灰显解决方案
Android WebView 视频播放,全屏按钮不显示或灰显解决方案背景问题定位背景在Android开发中,遇到了如下问题:Activity内嵌WebView,加载有视频的页面时,视频无法全 ...
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
Qt 窗口最大化，全屏无边框显示
//窗口最大化 setWindowState(Qt::WindowMaximized); 用这个要比用showMaximized好 //全屏无边框显示 setWindowState(Qt::Windo ...
照片全屏覆盖整个页面
照片全屏覆盖整个页面 1.看效果 2.vxml页面写入图片的路径 <view class="contain"><image class="big_img ...
Qt程序子窗口全屏时只能显示到主屏幕，子窗口全屏时父窗口依旧显示问题，任务栏缩略图显示错误，完美解决方案
Qt框架程序,全屏主窗口很简单,只需要调用主窗口对象的showFullScreen函数就可以了. 子窗口想要全屏的话,稍微复杂一些.因为Qt文档中明确表示,showFullScreen只对调用isWi ...
css 设置全屏背景图片
如果你有一张比较绚烂的图片想做背景,可以这样设置: 复制代码代码如下: body{ background:url(img.jpg); background-position:center; b ...

【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放

图片全屏覆盖

文本水平垂直居中

文本自适应缩放

本文完整网页源码

【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放相关推荐

最新文章

热门文章