當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2025/3/15 CSS 16 豆豆

生活随笔收集整理的這篇文章主要介紹了【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

圖片全屏覆蓋

我們可能希望實現圖片的全屏覆蓋，這種覆蓋是隨著網頁大小而調整的，而不是固定的，怎么做呢？

請看以下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; }

效果：

可以看出：基本算是實現了自適應。

另外，在網上看到這么一段代碼，感興趣的可以自己去試試：

本文完整網頁源碼

<!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实现の全屏覆盖+居中显示+等比缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【Java】浅析八种基本类型和包装类型
下一篇：【数字逻辑设计】判断二进制加法溢出的电路