vue+element-ui如何为元素设置背景图片

在元素标签里，直接：

style="background-image:url('1.jpg')"//图片路径

是不能显示图片的。

也不能直接background...，就是说不通过style，没有相关的属性。

也有人在vue的项目中设置背景图片时遇到问题，最终的解决办法是：

//1.在data中定义如下：export default {name: 'productdetailspage',data() {return {note: {backgroundImage: "url(" + require("../../assets/save.png") + ")",backgroundRepeat: "no-repeat",backgroundSize: "25px auto",marginTop: "5px",},}}//2.通过行内样式将样式引入<div class="note" :style ="note"></div>

提出这个解决方案的人应该是成功了，但是我用就不行。

我就想给登录表格添加一个背景图片（还想在其他地方添加背景图片，一个个来。），我的登录相关的html代码如下：

<el-col :span="12"><div><el-form :rules="rules"class="login"label-position="left"label-width="0px"v-loading="loading">...</el-form></div>
</el-col>

其中，el-form的class的值为login，所以我想干脆在这个里面加入背景设置，先看下login中的代码：

<style>.login {...}...</style>

在其中加入：

background-image: url("../../assets/images/1.jpg");

是可以的：

另一种写法：

background: #fff url("../../assets/images/7.jpg");

也是可以的：

还有一个问题，就是好像下面还有一张，有种重叠了的感觉。应该是一张图不足以填满整个表格。

需要使用：

background-repeat: no-repeat;

使用webstorm时，上述代码下面会有灰色的波浪线，鼠标光标放到上面，就会自动提出对上面的代码进行优化的建议：

Optimize background properties ...

只要alt+shift+enter，就会自动优化：

background: #fff url("../../assets/images/7.jpg") no-repeat;

可以了，没有重叠了，但也能看出我用的图片要比这个表格小：

这个只要在login中添加：

background-size: cover;

即可：

其他的背景图片就可以按照上述方法加了，在style中为元素定义一个样式xx，然后class="xx"。

vue+element-ui如何为元素设置背景图片相关推荐

给HTML中的块元素设置背景图片
css中关于块元素的背景有 background 属性. background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性 ...
element ui背景图_vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径是不能显示图片的. 也不能直接background...,就是说不通过 ...
Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
文章目录前言实现效果关键代码源码下载参考文献前言基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动,以及文字在图片上缩略显示和全部显示. 实现 ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

vue+element-ui如何为元素设置背景图片

vue+element-ui如何为元素设置背景图片相关推荐

最新文章

热门文章