CSS中设置el-form的背景图片，并通过background-size设置尺寸

快来打我* 2023-09-30 10:36 3阅读 0赞

## 场景 ##

登录框el-form设置其背景图片

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">

可以直接通过

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

来设置，但是设置之后发现

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

即使设置了el-form的宽度与背景图片宽度一致，也无法实现背景图片正好显示。

需要设置背景图片的尺寸。

background-image: url("../assets/images/login-bg.jpg");
      background-size: 100% 100%;

设置之后

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9c4dc6f893114984aefe58511fbbbb56.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f3fad9a7518a4e4e8820d21af85adfd3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 动态设置背景图片，并设置背景图片的渐变色

一、VUE动态设置背景图片 <template v-for="(item,index) in menu"> <div :key="item.id"

川长思鸟来/ 2023年10月13日 20:41/ 0 赞/ 46 阅读

相关 CSS中设置el-form的背景图片，并通过background-size设置尺寸

场景登录框el-form设置其背景图片 <el-form ref="loginForm" :model="loginForm" :rules="loginRu

快来打我*/ 2023年09月30日 10:36/ 0 赞/ 4 阅读

相关 CSS——设置背景

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2023年08月17日 16:10/ 0 赞/ 139 阅读

相关 css3设置背景图片的大小

background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： 1 backgroun

雨点打透心脏的1/2处/ 2022年10月19日 05:30/ 0 赞/ 204 阅读

相关 css设置背景

css2设置背景相关属性有如下： background : 简写属性，作用是将背景属性设置在一个声明中。 background-color : 设置元素的背景颜色。

小咪咪/ 2022年06月06日 02:24/ 0 赞/ 323 阅读

相关 Qt 设置背景图片

1. QLabel QPixmap pixmap("background.png"); setPixmap(pixmap);

逃离我推掉我的手/ 2022年05月26日 07:39/ 0 赞/ 395 阅读

相关 IDEA设置背景图片

来先看看效果啊 ![70][] 漂亮嘛! 是美女当然漂亮咯! 怎么设置呢? 下面来教大家! 1.先下载安装Background Image Plus

痛定思痛。/ 2022年05月17日 10:59/ 0 赞/ 385 阅读

相关 background-size 设置背景图片尺寸

background-size 有三个属性 auto :背景图片的真实大小 cover: 背景图片等比例缩放到铺满盒子 contain:背景图片拉伸以适应盒子大小还

桃扇骨/ 2022年04月10日 01:45/ 0 赞/ 383 阅读

相关背景图片设置属性

background-size有3个属性： auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片

心已赠人/ 2021年09月19日 03:06/ 0 赞/ 556 阅读

相关 css如何设置背景图片？background属性添加背景图片

在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价...

朱雀/ 2021年01月29日 18:18/ 0 赞/ 1038 阅读