vue 设置背景图地址_vue-生成自动铺满的背景图

生成如上图的背景图

需要以下的代码：

div部分：

<template>
<div  class="bg" :style ="bg">
</div>
</template>

script部分：

<script>
export default {name: 'fash',data() {return {bg: {backgroundImage: "url(" + require("../../assets/teaforence_logo.png") + ")",backgroundRepeat: "repeat",backgroundSize: "40vh 20vw",},};},methods: {},mounted() {}
};
</script>

其中backgroundSize是控制背景单位图片的尺寸的，而backgroundRepeat是决定图片是否进行重复的。

backgroundSize

CSS3 background-size 属性www.w3school.com.cn

backgroundRepeat

CSS background-repeat 属性www.w3school.com.cn

如果需要将一张图片铺满整个背景则可以参考这个教程的代码：

<template>
<div  class="bg" :style ="bg">
</div>
</template><script>
export default {name: 'fash',data() {return {bg: {backgroundImage: "url(" + require("./img/fash.png") + ")",backgroundRepeat: "no-repeat",backgroundSize: "100% 100%",},};},methods: {},mounted() {}
};
</script>

vue项目设置背景图片_tian_jiangnan的博客-CSDN博客_vue 背景图片blog.csdn.net

vue 设置背景图地址_vue-生成自动铺满的背景图相关推荐

html view设置全屏,uni-app 如何设置web-view 不全屏，不自动铺满，动态控制web-view的高度...
uni-app 如何设置web-view 不全屏,不自动铺满,动态控制web-view的高度 2020年07月17日 | 萬仟网IT编程 | 我要评论内容写在onload里面,如果是初始化的时候控制 ...
html网页自动铺满屏幕,HTML+CSS入门高度如何铺满全屏
本篇教程介绍了HTML+CSS入门高度如何铺满全屏,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < IE6不认识!important声明,IE7.IE8.Firefox. ...
vue怎么引入外部地址_vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
java 水印排版_java实现倾斜水印铺满整张图
今天遇到一个需求对上传的图铺满水印,在网上找了半天都是在指定位置设置水印,下面代码是我通过在网上找的代码,然后改造而成的.我们先看一下效果图下面讲实现方法: 第一步:使用ps或美图软件设计水印图片, ...
CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...
html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
vue设置输入框输入长度_Vue实现input宽度随文字长度自适应操作
业务需求,输入文字,后面的元要紧随其后,奈何input默认是有宽度,我想要达到,输入文字,动态改变input的宽度,试了很多方法,目前自己琢磨一种,有遇到问题的可以参考一下, 直接贴代码 type=& ...
vue获取input的属性_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...

vue 设置背景图地址_vue-生成自动铺满的背景图

vue 设置背景图地址_vue-生成自动铺满的背景图相关推荐

最新文章

热门文章