前端vue中div设置background图片铺满div

news/2024/10/15 7:40:38/

使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果

使用background-image属性给div设置背景图片:

div {

  background-image: url("图片路径");

}

使用background-size属性设置背景图片的大小。要使背景图片撑满整个屏幕,可以将它的值设置为cover:

div {

  background-image: url("图片路径");

  background-size: cover;

}

对div设置宽度和高度都:

div {

  background-image: url("图片路径");

  background-size: cover;

  width: 15%;

  height: 60%;

}

如果使用background-size:cover属性不行,尝试background-size:contain属性

div {

    height: 60%;

    width: 15%;

    /* 指定背景图片路径 */

    background-image: url(/src/assets/images/1.png);

    background-size: contain;

    /* 使背景图片始终固定在元素的中心 */

    background-position: center;

    /* 背景图片不重复 */

    background-repeat: no-repeat;

}


http://www.ppmy.cn/news/1539332.html

相关文章

interwirelessac9560感叹号,电脑无法连接wifi,无法搜索到wifi

interwirelessac9560感叹号 电脑无法连接wifi,无法搜索到wifi 原因 这可能是wifl模块出现了问题。 解决方案 1、winx 打开,选择【设备管理器】 2、选择网络适配器 右键打开wireless-AC,选择【卸载设备】。 3、关机2分钟后&#xff0c…

力扣887.鸡蛋掉落

给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的楼层落下的鸡蛋都不会破。 每次操作&#xff0c…

redistemplate实现点赞相关功能

使用Redis的SET数据结构来存储每个实体的点赞用户ID列表&#xff0c;方便进行点赞数量的计数和用户点赞状态的检查。以下是一个小demo&#xff0c;只提供简单思路。 Service public class LikeService {Autowiredprivate RedisTemplate redisTemplate;//点赞public Long like(…

agent介绍

agent agent核心特征交互方式agent介绍Generative AgentsAutoGPTHuggingGPTMetaGPTVoyagerCharacter-LLMChatDB agent 简介&#xff1a; agent即智能体概念&#xff0c;即人工智能在使用中&#xff0c;前期人为决策核心的嵌入模型&#xff0c;中期&#xff0c;通过与人工智能交…

Java贪吃蛇游戏源代码

import java.awt.Color&#xff1b; import java。awt.Graphics; import java.awt.Toolkit&#xff1b; import java。awt.event。ActionEvent; import java.awt。event。ActionListener; import java。awt.event。InputEvent; import java.awt.event.KeyEvent&…

若依前后端分离版本el-select下拉框字典如何设置默认值。

在若依前后端分离框架中&#xff0c;如何给下拉框设置默认值&#xff0c;刚入门的小伙伴&#xff0c;可能会不知道如何去做。 本章教程&#xff0c;主要以用户管理模块中的添加用户举例说明如何设置用户性别默认值为男。 解决思路 首先&#xff0c;我们需要找到打开新增页面的方…

前端/node.js锁定依赖版本、锁定依赖的依赖的版本

一、知识前提 version&#xff1a;必须依赖某个具体的版本。如&#xff1a;vue的3.2.0&#xff0c;表示必须安装3.2.0版本。>version&#xff1a;必须大于某个版本。>version&#xff1a;大于或等于某个版本。<version&#xff1a;必须小于某个版本。<version&…

从2.x到3.x:Spring Boot升级遇到的问题!

从2.x到3.x&#xff1a;Spring Boot升级遇到的问题&#xff01; 1.关于redis报错2.关于servlet报错2.关于Spring Security报错 报错内容采集 1.关于redis报错 报错内容&#xff1a;Property ‘spring.redis.host’ is Deprecated: Use ‘spring.data.redis.host’ instead.”、…