在元素标签里,直接:

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.通过行内样式将样式引入

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

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

...

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

在其中加入:

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"。

Logo

前往低代码交流专区

更多推荐