Vue基础技术|背景图铺满全屏效果

最新推荐文章于 2024-05-23 17:03:31 发布
最新推荐文章于 2024-05-23 17:03:31 发布
阅读量1.3w 收藏 5
点赞数 1
文章标签： 背景图片
MJ
本文链接：https://blog.csdn.net/gbwine/article/details/95894905
版权

背景图：

背景图尺寸信息：

新建全局样式文件global.styl，并编写全局样式

查看效果图：

问题：通过背景图原图比对发现显示效果不全。

如何实现背景图的全屏呢？可以通过css3提供的backgroun

最低0.47元/天 解锁文章
尼古·拉斯
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue设置背景占满全屏
qq_33581509的博客
06-26 1万+
vue设置背景占满全屏 示例：如下图的顶部和左侧的空白区域： 解决背景图片占满全屏的问题如下： 1、首选要新建一个全局样式表global.css文件，代码如下： /* 全局样式表 */ html, body, #app { height: 100%; margin: 0; padding: 0; } 2、在项目入口文件导入全局样式表，代码如下： import './assets/css/global.css' 3、然后在style中设置如下代码： .login{ backg
vue+vant 监听移动端页面分辨率来展示图片大小（确定背景图片的background-size使用cover还是contain）
DcTbnk的博客
04-15 875
background-size：cover/contain cover是用于图片小于容器，把图片等比例铺满，这个会裁剪图片。 container是用于图片大于容器，把图片等比例缩小，这个会显示完整图片但不会铺满。 mounted () { // 初始化背景图 this.$nextTick(() => { // console.log('打印photo的值', window.ApiConfig.systemFlag) // 首先先拿到配置文件中的系统标识 进行sw
Vue项目背景图片设置，放大缩小都可以
最新发布
weixin_45849417的博客
05-23 210
在vue项目中，设置背景图片，浏览器的方法缩小，背景图片也会跟随放大缩小。
[Vue] Vue3背景认识和常见面试题
南花醉笔丶的博客
02-14 467
文章目录Web前端技术发展Ajax同步请求和异步请求的利弊，为什么同步请求不总是可行为什么ajax服务器端早期返回的是xml，现在是json呢？MVC，MVP 和 MVVMMVC Web前端技术发展 早期的Web应用主要是以静态页面的浏览（比如新闻浏览），这些静态页面使用HTML语音编写。1995 年，Netseape 公司的工程师 Brendan Eich 设计了JavaScript 脚本语言，使前端网页具有动态的效果（跑马灯，浮动广告等），以及与用户交互能力的表单。 然而随着互联网的发展，很多的线下业务
css3——background-size 属性、vue3——中less、sass最新的深度选择器 deep()
weixin_43551242的博客
06-07 1069
CSS3、VUE3
vue div backgroundSize 不起作用的解决办法
阿豪
02-27 925
原文链接: vue div backgroundSize 不起作用的解决办法 ...
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中设置背景图片方法
08-28
Vue 项目中设置背景图片方法 在 Vue 项目中，设置背景图片是一件非常常见的事情。然而，在项目开发中，我们经常会遇到背景图片无法正确显示的问题。这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了...
vue 动态绑定背景图片的方法
12-29
vue动态绑定背景图片的方法，具体介绍如下所示： 1.backgroundImage && 三目运算符 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + coverImgUrl + ')', backgroundS
【Vue】图片拉近、全屏背景实战经验总结
游坦之的博客
09-27 3165
写这一篇博客，我发现这个图片功能太简单了。我自己用vue做的时候，用的是@mouseover @mouseout 需要两个方法 让其有1s动画效果的时候，我用的是根据类名获取元素，然后鼠标悬浮的时候给他加上动画的效果。 但是动画的效果默认是不会保存的，间隔一秒后又会回到初始化的状态，所以又加了一句animation-fill-mode:forwards，让其保持动画的状态。 写这篇博客之后，原来只需要几行代码就解决了！
vue 内联样式style中的background用法说明
10-14
主要介绍了vue 内联样式style中的background用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue - style绑定background
sinat_33184880的博客
03-05 4070
<div :style="{background: 'url(' + item.home_img + ') center center', backgroundSize: '100%'}"> 注意 属性中存在'-'需要修改，如background-size需要修改成backgroundSize或者‘background-size’ 属性的值如果不是变量，需要加引号，如'100%...
CSS3之背景尺寸Background-size
梦龙小站
10-14 1万+
CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。
css3设置背景图片的大小
林中明月间丶
02-28 2121
转载：https://www.cnblogs.com/imguo/p/5772668.htmlcss3设置背景图片的大小background-size设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50p...
Vue设置背景图片(全屏背景),实际操作与踩雷.
weixin_43633275的博客
06-30 3627
最近一直困扰我一个背景问题,也是Vue的项目,问题就是在Vue上添加一个好看的背景,每次去网上查的时候,几乎所有插过来的答案都是一样的,我一度怀疑他们理解的背景和我理解的背景是两个东西 网上的答案: 在主div上设置: <div :style="backgroundDiv"> </div> data中的设置: data() { return { backgroundDiv : { backgroundImage : 'url(' + requir
Vue中引用图片-背景图片
凌枫ozo的博客
06-30 1386
Vue中引用图片-背景图片 第一种方案 <img class="card" src="~@/assets/img/card_bg.png" ></img> 第二种方案 <div class="card"></div> <style> .card { background: url('~@/assets/img/card_bg.png') center center no-repeat; } </style&gt
css vue 内联_vue 内联样式style中的background用法说明
weixin_26706567的博客
01-13 1843
vue 内联样式style中的background用法说明在我们使用vue开发的时候 有很多时候我们需要用到背景图这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去注意 在vue中直接使用style时 花括号一定别忘记还有就是你的url一定要加引号拼接：style = ' { backgroundImage : " url ( " + item.img + " ) " } '完事！补充：好像...
Vue项目中设置背景图片
热门推荐
woyidingshijingcheng的博客
06-07 8万+
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式：background:url("../../assets/head.jpg");这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题： 1》在data中定义如下： export defa
vue 绑定background 属性的写法
丽丽大神ing的博客
03-19 5693
参考链接 ：https://blog.csdn.net/qq_34664239/article/details/79106570 元素 <template> <el-carousel trigger="click" height="386px" :autoplay=false arrow="never"> <el-carouse...
vue页面设计背景图铺满
09-05
在Vue页面中实现背景图铺满的效果，可以使用CSS的background-size属性。通过设置background-size为cover，可以让背景图片自动拉伸以铺满整个元素。例如，在Vue组件的样式中添加以下代码可以实现背景图铺满的效果： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值