在Vue中将单独一张图片设为背景图并充满整个屏幕

最新推荐文章于 2024-08-19 17:40:43 发布

吃不胖爹

最新推荐文章于 2024-08-19 17:40:43 发布

阅读量746

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43894292/article/details/130287036

版权

vue 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用CSS将一张图片设置为网页的全屏背景，并确保图片不重复显示，填充整个屏幕。通过设定`background-size`为100%100%，`position`为fixed，以及调整div的高度和宽度，可以实现背景图片充满屏幕的效果。

摘要由CSDN通过智能技术生成

将单独一张图片设为背景图并充满整个屏幕
代码如下(在主div中添加样式)

  background: url("../xx/images/图片名字.jpg");//这里的地址是用你项目中图片所在的路径为准
  background-repeat: no-repeat;//将图片样式不重复
  background-size: 100% 100%;  //设置图片大小
  position: fixed; /* 充满全屏 */
  height: 100%; //设置div高度
  width: 100%; //设置div宽度