当前位置:首页 > 未分类

CSS:实现background-image背景图片全屏铺满自适应

admin3年前 (2024-03-15)未分类12330
body {
    /* 加载背景图 */
    background-image: url(images/bg.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
    background-color: #464646;
}

原文链接:https://www.cnblogs.com/Fooo/p/16433917.html

扫描二维码推送至手机访问。

版权声明:本文由web开发技术分享发布,如需转载请注明出处。

本文链接:https://www.htmlcmf.cn/?id=9

分享给朋友:

相关文章

使用requireJS导致引用文件加载不到的解决办法

近期项目中需要使用【复制到剪切板】的功能,故引入clipboard.min.js,完成该功能。但在使用时发现,页面总是报错:clipboardJS is not defined。查找资料发现,clipboard为全局变量,而被require…

css文字颜色渐变

background-size: 100%; background-repeat: repeat; background-clip: text; -webkit-background-clip: …

Js生成随机数/随机字符串的5种方法

Js生成随机数/随机字符串的5种方法:方法1:使用randomStringfunction randomString(e) {   e = e || 8;&n…

nginx 设置某个目录只允许访问指定后缀文件

server {        listen 80;        server_name your…

npm install卡在“sill idealTree buildDeps“问题的两种解决方法

当你尝试在 Vue 项目中执行 npm install 时,你可能会遇到一个问题:命令卡在"sill idealTree buildDeps"这一步,没有任何反应。这个问题的根源在于淘宝镜像源的域名过…

HTML点击跳转对应应用(邮箱、手机、微信、QQ)

1、点击邮箱号跳转到邮箱应用 (已测试)<a href="mailto:support@xxx.com">邮箱:mailto:support@xxx.com</a>2、点击手机号跳转到拨…