-
2022-03-30 19:36:33
在vue中设置背景图片
- 在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白
#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 0px; }
- 在App.vue中加入body样式,使得背景图片四周不会留有空白
body{ margin:0; padding:0; border:0 }
- 在需要背景图的页面里加入样式building
#building{ background:url("../assets/Chicagohenge_ZH-CN7070361892_1920x1080.jpg"); width:100%; height:100%; position:fixed; background-size:100% 100%; }
- 在原有代码中的div外再套一层div
<template> <div id='building'> <div> 主体代码 </div> </div> </template>
- 显示el-dialog弹窗时背景会变灰色,解决办法是将el-dialog的append-to-body属性设为true
<el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :append-to-body="true"> <span>请输入账号和密码</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog>
结果展示
发现背景图使得登录框中内容不太清楚,在login-box中加入background-color属性,ragb 前三个参数表示颜色,第四个参数表示透明度
.login-box{ border:1px solid #dccfcf; width: 350px; margin:180px auto; padding: 35px 80px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; background-color:rgba(255,255,255,0.7); }
修改后结果展示
更多相关内容 -
css如何设置网页背景图片?
2021-06-10 12:40:09在前端开发过程中,为了页面的美观,...在CSS中,可以使用background-image属性和background属性来设置背景图片。background-image属性用于设置一个元素的背景图像;元素的背景是元素的总大小,包括填充和边界(但不...在前端开发过程中,为了页面的美观,往往都会给html网页添加背景图片。那么如何在html网页中利用css设置背景图片?下面本篇文章就给大家介绍css设置网页背景图片的方法,希望对大家有所帮助。
在CSS中,可以使用background-image属性和background属性来设置背景图片。
background-image属性用于设置一个元素的背景图像;
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
background-image属性语法:background-image:url|none|inherit
属性值:url 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承
示例:
div{
width:450px;
height: 300px;
background-image: url("1.jpg");
}
background属性是一个简写属性,可以在一个声明中设置所有的背景属性。
background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。
下面看看background可以设置的属性:background-color: 规定要使用的背景颜色。
background-position: 规定背景图像的位置。
background-size: 规定背景图片的尺寸。
background-repeat :规定如何重复背景图像。
background-origin :规定背景图片的定位区域。
background-clip: 规定背景的绘制区域。
background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image :规定要使用的背景图像。
使用background属性将这些属性放在一起设置的,这样的css背景表达可以节约且优化了css文件代码。background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释:
示例:
背景图片设置.demo{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(1.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
-
css怎么设置背景图片大小?
2021-06-10 17:02:49我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的...我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。
css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的尺寸。
语法:background-size: length|percentage|cover|contain;
属性值:值描述
length设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
示例
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
上面是缩小的背景图片。
原始图片:
效果图:
-
css设置背景图片
2021-12-27 08:25:53背景图片的层级:首先设置的图片资源会浮在最上层(z-index最大),否则容易被遮盖。 设置两种不同的背景 示例 <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum ...纯色背景
示例
<h1>CSS background-color 实例!</h1>
样式background-color
h1 { background-color:#6495ed; }
纯色背景效果
背景设置为图片
示例
<h1>Hello World!</h1>
样式
body { background-image:url('paper.gif'); background-color:#cccccc; }
背景图片效果
背景平铺
示例
<h1>Hello World!</h1>
<h2>Hello World!</h2><div>
<h3>Hello World!</h3>
</div>设置样式no-repeat,repeat-x,repeat-y
h1 { background-image:url('https://static.runoob.com/images/mix/gradient2.png'); background-repeat:no-repeat; } h2 { background-image:url('https://static.runoob.com/images/mix/gradient2.png'); background-repeat:repeat-x; } div { background-image:url('https://static.runoob.com/images/mix/gradient2.png'); background-repeat:repeat-y; height:300px; }
效果
背景图片的位置
示例
<body>
<h1>Hello World!</h1>
<p>背景图片不重复,设置 position 实例。</p>
<p>背景图片只显示一次,并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>样式background-position
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; }
效果(我们发现背景是在右上方绘制的)
固定背景
固定背景在整幅背景不随内容滚动的场景使用。
示例
<body>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
<p>这里的背景图片是固定的。你需要看到效果的话,得尝试向下滚动一下页面。</p>
</body>样式background-attachment:fixed
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:center; background-attachment:fixed; }
效果(上下滚动时,body的背景图片不会随之滚动)
背景图片的层级:首先设置的图片资源会浮在最上层(z-index最大),否则容易被遮盖。
设置两种不同的背景
示例
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>背景样式
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; }
这里分别设置了background-image的属性,img_flwr.gif在最上层。它是在右下角进行渲染的,不重复渲染。paper.gif是在左上角开始渲染的,重复渲染。
也可以直接设置样式,效果是一致的:
#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; padding: 15px; }
背景效果
注意,这里 img_flwr.gif必须最先指定,否则会被paper.gif遮盖住。
-
css如何设置背景图片?background属性添加背景图片
2021-02-05 06:39:00在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。...css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。下面看看background可以设置的属性:background-... -
IDEA设置背景为自定义照片
2021-06-28 16:44:23一分钟教你把女朋友的照片设置成IDEA的背景图片【建议收藏】1. 为什么写这篇文章?2. 操作方法2.1. 步骤12.2. 步骤22.3. 快捷操作 一2.4. 快捷操作 二 1. 为什么写这篇文章? 事情是这样的,在 2021年6月10日早上我... -
如何将图片设置为Word页面背景?
2021-07-13 00:13:06如何将图片设置为Word页面背景?腾讯视频/爱奇艺/优酷/外卖 充值4折起在日常办公中,我们经常会需要制作一些精美的word文档,插入背景图片可以让word文档看起来更加精致,接下来小编就给大家介绍一下如何将图片设置... -
css如何设置背景图片?
2021-06-11 06:55:19本文就给大家介绍css怎样设置背景图片。css可以通过background-image属性来设置背景图片,background-image属性用于设置一个元素的背景图像。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。默认情况下,... -
设置PyCharm背景图片
2020-04-13 15:52:35更换PyCharm背景,换个背景,换个心情写代码,每天都有好心情。 -
div background css设置div背景图片
2021-06-09 04:18:10CSS5对DIV盒子配置后台图片,如何显现后盾图片,程度平铺图片、纵向平铺图片、无量平铺图片、定位后台图片等手腕机关教程一、配景基本语法1、CSS单词:要对任何对象设置靠山使用bac千克round花式单词。2、CSS配景... -
html网页背景图片设置
2021-06-10 16:29:38添加网站全局背景图片显示:背景图片颜色属性(background-color)设置一种纯色背景,它会覆盖填充素内容。背景图片属性(background-image)这个属性是设置HTML元素背景图片,相当于background属性一样。背景图片属性... -
VScode 设置 背景图片
2021-11-29 14:36:263.设置自己喜欢的背景图 // background相关配置 Start "background.useDefault": false, // 是否使用默认图片,改成false不默认,设置自己想要的 "background.style": { "content": "''", "po. -
Swing设置窗体背景图片
2019-01-30 10:33:55Swing设置窗体背景图片,简单的实现方法就是在窗体中放在一个...// 设置背景 JLabel lblBackground = new JLabel(); // 创建一个标签组件对象 URL resource = this.getClass().getResource("/background.jpg"); ... -
在Android中设置窗口背景图
2021-05-28 08:25:08比如我们希望设置我们应用窗口的背景,则可以简单的用上面提到的规范裁剪对应的图片,然后做下面步骤即可: 1、将背景图片COPY到对应的drawable文件夹中,假设这里用的是bg1.png 2、修改main.xml,添加 android:... -
HTML背景图片的设置
2022-01-05 20:13:19背景图片的设置,背景图片大小、位置、是否重复以及附着点的问题 -
在html网页中如何设置背景图片?网页背景怎么设置?
2021-06-16 06:01:24那么今天小编来教大家怎么在 html 网页中设置背景图片吧!1.首先还是老样子,我们在开发工具中新建一个 .html 文件,然后再文件中自己定义自己喜欢的内容,代码如下:网页背景设置网页背景怎么设置网页背景怎么设置... -
Vue 设置背景图片样式
2020-04-07 16:26:37Vue 设置背景图片样式CSS效果图 CSS <style> body{ background-image: url('./bg.jpg'); background-size: cover; background-position: center; font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\... -
html的背景图片设置
2021-08-27 23:50:26背景图片:background-img,可用网址或图片存放地址进行设置 平铺方式: background-repeat:repeat,在背景上只出现一张图片,没有设置宽高时全屏铺满 background-repeat:repeat-x,横向铺满 background-repeat:... -
css如何设置背景图片的透明度
2021-08-04 06:00:32css如何设置背景图片的透明度发布时间:2020-11-16 10:34:06来源:亿速云阅读:70作者:小新了解css如何设置背景图片的透明度?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面... -
QWidget设置背景图片
2021-06-12 19:42:41// 设置背景图片 setAutoFillBackground(true); // 这句要加上, 否则可能显示不出背景图. QPalette palette = this->palette(); //palette.setColor(QPalette::Window, Qt::red); // 设置背景色 //palette.... -
CSS设置背景图片不显示的解决方法
2021-06-13 08:41:37在建立新的内容模型的时候,需要修改前台的文章页面的排版,为了使页面各个部分的显示效果一致,希望增加的部分的标题的背景图片与其他版块的背景相同。为了方便,于是就直接从原有的CSS文件中把代码复制过来了,... -
vscode 怎么设置背景图片
2022-03-03 10:33:50方法 使用background插件 安装插件以及设置步骤 ...2.输入框输入“background”搜索插件 ...4.此时界面如下所示: ... ...7.在“settings.json”文件中配置,放进想要的... // 是否开启背景图显示 "background.enabled": true, -
javafx设置背景图片
2020-11-22 10:43:08javafx设置背景图片 使用css setstyle方式 但使用IntelliJ IDEA时,在写路径时会提示错误,但实际上是可以不管的 路径写项目的工作目录的相对路径即可 项目的路径如下: ├── pom.xml ├── src │ ├── data │ ... -
html背景图片怎么设置平铺方式
2021-06-19 01:20:38在html中,可利用background-repeat属性来设置背景图片的平铺方式;当属性值设置为“repeat”时可向垂直和水平方向平铺,“repeat-x”时可水平平铺,“repeat-y”时可垂直平铺,“no-repeat”时不平铺。本教程操作... -
css怎么设置背景图片不重复?
2021-06-12 02:15:07在使用css添加背景图片时,默认的样式是图片重复;但有时页面只需要一个不重复的大背景图片,...background-repeat属性用于设置背景图片的重复方式,将background-repeat属性值设为no-repeat即为背景图片不重复。b... -
Dw怎么背景图片设置
2021-09-06 14:38:15保存,把新建的HTML保存下,不然后面做页面背景图片不行。如下图所示。 5.保存好后,点击导航上的修改,如下图所示。 6.然后直接点击弹出菜单里的页面属性,如下图所示。 7.打开... -
Qt设置按钮背景图片
2020-01-01 02:32:34用qss可以修改按钮的样式,但是一些复杂的图形用图片来做显示效果更好,下面给出Qt按钮添加图片的方法,直接用setIcon的方法,图片会被缩放,下面的方法正常显示 //设置按钮图标,按钮的默认大小是 30*30,可以... -
CSS设置背景图片及背景颜色示例
2021-06-12 04:47:351.设置背景颜色background-color是CSS中的背景颜色属性,这个属性用于为HTML元素设定背景颜色,可以设置整个网页的背景颜色,也可以设置...设置背景图片(1)background-image是CSS中的背景图片属性,这个属性用于为H... -
uni-app设置页面背景及背景图片
2022-04-11 10:45:49设置背景 1、设置背景色: <template> <view class="container"> //最外层 <view class="bg-colore"></view> //此标签为最外层view标签的第一个子标签 <view class="content"><... -
怎么设置html的背景图片的位置
2021-07-01 02:02:52设置html的背景图片的位置的方法是,给背景图片添加background-position属性,并且修改合适的属性值就可以了,例如【background-position:center;】。本文操作环境:windows10系统、html 5、thinkpad t480电脑。如果...