精华内容
下载资源
问答
  • 怎么把图片设置成背景图
    万次阅读 多人点赞
    2022-03-30 19:36:33

    在vue中设置背景图片

    1. 在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;
    }
    
    1. 在App.vue中加入body样式,使得背景图片四周不会留有空白
    body{
      margin:0;
      padding:0;
      border:0
    }
    
    1. 在需要背景图的页面里加入样式building
    #building{
      background:url("../assets/Chicagohenge_ZH-CN7070361892_1920x1080.jpg");
      width:100%;
      height:100%;
      position:fixed;
      background-size:100% 100%;
    }
    
    1. 在原有代码中的div外再套一层div
    <template>
    <div id='building'>
    	<div>
    		主体代码
    	</div>
    </div>
    </template>
    
    1. 显示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设置网页背景图片的方法,希望对大家有所帮助。

    45d3903eb8cf4981100779ac2ded3cff.png

    在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");

    }

    38572ca9b38119ea1fb75e6586d1abd2.png

    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;

    如下图解释:

    89ad55f581d3020f9aa7c6611705ce0c.png

    示例:

    背景图片设置

    .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;

    }

    fc8ad42dee55a98fbda93f683a23f776.png

    展开全文
  • css怎么设置背景图片大小?

    千次阅读 2021-06-10 17:02:49
    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小,background-size属性规定背景图像的...

    我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,下面我们来看一下使用css设置背景图片大小的方法。

    0a5c785193aed7b6c57ca6a298191c90.png

    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;

    }

    上面是缩小的背景图片。

    原始图片:Flowers

    效果图:

    ba15c610ebe4077e357919a4370861be.png

    展开全文
  • 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遮盖住。

    展开全文
  • 在前端开发过程中,为了页面的美观,往往都会给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:10
    CSS5对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:26
    3.设置自己喜欢的背景图 // background相关配置 Start "background.useDefault": false, // 是否使用默认图片,改成false不默认,设置自己想要的 "background.style": { "content": "''", "po.
  • Swing设置窗体背景图片

    千次阅读 2019-01-30 10:33:55
    Swing设置窗体背景图片,简单的实现方法就是在窗体中放在一个...// 设置背景 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 网页中设置背景图片吧!1.首先还是老样子,我们在开发工具中新建一个 .html 文件,然后再文件中自己定义自己喜欢的内容,代码如下:网页背景设置网页背景怎么设置网页背景怎么设置...
  • Vue 设置背景图片样式

    千次阅读 2020-04-07 16:26:37
    Vue 设置背景图片样式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:32
    css如何设置背景图片的透明度发布时间: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:08
    javafx设置背景图片 使用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:35
    1.设置背景颜色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电脑。如果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 391,112
精华内容 156,444
关键字:

怎么把图片设置成背景图