精华内容
参与话题
问答
  • 错误的写法:加到div中结合图片设置min-height,但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:100%; height:100% } 再加一段 body{ font-family: "华文细...

    用什么代码实现?不允许有白色底色产生,因为手机高度不一样

    设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面

    错误的写法:加到div中结合图片设置min-height,但是页面不会回弹

    终极方案

    html,body{
    	width:100%;
    	height:100%
    }
    
    body{
      font-family: "华文细黑";
      background:url("../img/Flyer-bg.png") no-repeat;
      background-size: 100%;
    }
    

    一个hack方案解决垂直剧中问题

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0">
        <title>缓存</title>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/store.min.js"></script>
        <style>
            .parent{
                width:200px;
                height: 200px;
                /* 以下属性垂直居中 */
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #aaa;
            }
        </style>
    </head>
    <body>
        <div class="parent">111</div>
    </body>
    

    其他方案

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">  
        <img src="https://www.qianbuxian.com/uploads/banners/20171214085954_shouye5.jpg" width="100%" height="100%"/>  
    </body>
    </html>
    

    清除浮动

    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
    .clear-fix:after {
        display: table;
        content: '';
        clear: both;
    }
    
    展开全文
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...

    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

    背景图片取消重复

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    

    修改前
    背景图片取消重复
    修改后
    背景图片取消重复

    背景图片固定(不会随着内容滚动而改变位置)

    background-image: url(image.jpg);
    background-attachment:fixed;
    

    背景图片居中显示

    垂直水平居中

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    

    背景图片居中显示
    水平方向居中 垂直方向向上

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    

    在这里插入图片描述
    水平方向向右 垂直方向向下

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:right bottom;
    

    在这里插入图片描述

    背景图片等比例拉伸

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: auto 100%;
    /* background-size: 100% auto; */
    

    背景图片等比例拉伸
    或根据高度进行拉伸
    背景图片等比例拉伸
    还可以使用 cover 自动等比例拉伸图片

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    

    背景图片等比例拉伸

    背景图片拉伸(会扭曲图片)

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    

    背景图片拉伸(会扭曲图片)

    展开全文
  • 今天公司要做一个大屏展示,背景图片是背景色+透明背景图片合并而成,同事使用的是AI工具制作的图片,同事提供了一个透明的背景图片,然后让我显示最终的效果,按照 我的理解背景图片应该是与背景色不能共存的,查询...

    文章参考

    1. https://bbs.csdn.net/topics/390695803

    问题描述

    今天公司要做一个大屏展示,背景图片是背景色+透明背景图片合并而成,同事使用的是AI工具制作的图片,同事提供了一个透明的背景图片,然后让我显示最终的效果,按照
    我的理解背景图片应该是与背景色不能共存的,查询了相关资料,当背景图片和背景色同时作用的时候,背景图片会覆盖背景色,没有覆盖到的就显示背景色,因此,可以模拟背景图片和背景色合并之后的效果

    案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .mybg{
            background-image: url("../images/screen/bg.png");
            background-color: #112035;
        }
    </style>
    <body class="mybg">
    </body>
    </html>
    
    展开全文
  • style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; } ...css代码添加背景图片常用代码 1 背景颜色 {
    
     
    <style> 
        .body{ 
                background-image: url('${basepath}/resource/images/loginb1.jpeg'); 
                background-size: 100%; 
                background-repeat:no-repeat;
             } 
    </style>
    
    css代码添加背景图片常用代码
      1 背景颜色 {background-color:数值}
      2 背景图片 {background-image: url(url)|none}
      3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
      4 背景固定 {background-attachment:fixed|scroll}
      5 背景定位 {background-position:数值|top|bottom|left|right|center}
      6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
      1 背景颜色 {background-color:数值}
      2 背景图片 {background-image: url(url)|none}
      3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
      4 背景固定 {background-attachment:fixed|scroll}
      5 背景定位 {background-position:数值|top|bottom|left|right|center}
      6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

     

    
     
    1.背景颜色:background-color
      语法:{background-color:数值}
      说明:参数取值和颜色属性一样
      注意:在html当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用css就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。
      例子:给部分文字加背景颜色给部分文字加背景颜色
      表格背影颜色:style="background-color:red"
      2.背景图片:background-image
      语法:{background-image: url(url)|none}
      说明: url就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。
      例子:给部分文字加背景图片 .imgbgstyle { background-image: url(logo.gif)}
      3.背景重复:background-repeat
      语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
      作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
      说明:参数取值范围:
      ·inherit 继承
      ·no-repeat 不重复平铺背景图片
      ·repeat
      ·repeat-x 使图片只在水平方向上平铺
      ·repeat-y 使图片只在垂直方向上平铺
      注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
      4.背景固定:background-attachment
      语法:{background-attachment:fixed|scroll}
      说明:参数取值范围
      ·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
      ·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
      注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。
      例子:使背景图案不随文字“滚动”的css
      body { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
      5.背景定位:background-position
      语法:{background-position:数值|top|bottom|left|right|center}
      作用:背景定位用于控制背景图片在网页中显示的位置。
      说明:参数取值范围
      ·带长度单位的数字参数
      ·top:相对前景对象顶对齐
      ·bottom:相对前景对象底对齐
      ·left:相对前景对象左对齐
      ·right:相对前景对象右对齐
      ·center:相对前景对象中心对齐
      ·比例关系
      关键字解释如下:
      top left = left top = 0% 0%
      top = top center = center top = 50% 0%
      right top = top right = 100% 0%
      left = left center = center left = 0% 50%
      center = center center = 50% 50%
      right = right center = center right = 100% 50%
      bottom left = left bottom = 0% 100%
      bottom = bottom center = center bottom = 50% 100%
      bottom right = right bottom = 100% 100%
      注意:参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。
      6. 背景样式:background
      语法:{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
      作用:背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
      例子:
      body { background: white url(http://www.help.com/foo.gif) }
      blockquote { background: #7fffd4 }
      p { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
      table { background: #0c0 url(leaves.jpg) no-repeat bottom right }
      注意:当一个值未被指定时,将接受其初始值。例如,在上述的前三条规则,背景位置属性将被设置为0% 0%。为了避免与用户的样式表之间的冲突,背景和颜色应该一起被指定。


      语法:{background-color:数值}
      说明:参数取值和颜色属性一样
      注意:在html当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用css就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。
      例子:给部分文字加背景颜色给部分文字加背景颜色
      表格背影颜色:style="background-color:red"
      2.背景图片:background-image
      语法:{background-image: url(url)|none}
      说明: url就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。
      例子:给部分文字加背景图片 .imgbgstyle { background-image: url(logo.gif)}
      3.背景重复:background-repeat
      语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
      作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
      说明:参数取值范围:
      ·inherit 继承
      ·no-repeat 不重复平铺背景图片
      ·repeat
      ·repeat-x 使图片只在水平方向上平铺
      ·repeat-y 使图片只在垂直方向上平铺
      注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
      4.背景固定:background-attachment
      语法:{background-attachment:fixed|scroll}
      说明:参数取值范围
      ·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
      ·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
      注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。
      例子:使背景图案不随文字“滚动”的css
      body { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
      5.背景定位:background-position
      语法:{background-position:数值|top|bottom|left|right|center}
      作用:背景定位用于控制背景图片在网页中显示的位置。
      说明:参数取值范围
      ·带长度单位的数字参数
      ·top:相对前景对象顶对齐
      ·bottom:相对前景对象底对齐
      ·left:相对前景对象左对齐
      ·right:相对前景对象右对齐
      ·center:相对前景对象中心对齐
      ·比例关系
      关键字解释如下:
      top left = left top = 0% 0%
      top = top center = center top = 50% 0%
      right top = top right = 100% 0%
      left = left center = center left = 0% 50%
      center = center center = 50% 50%
      right = right center = center right = 100% 50%
      bottom left = left bottom = 0% 100%
      bottom = bottom center = center bottom = 50% 100%
      bottom right = right bottom = 100% 100%
      注意:参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。
      6. 背景样式:background
      语法:{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
      作用:背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
      例子:
      body { background: white url(http://www.help.com/foo.gif) }
      blockquote { background: #7fffd4 }
      p { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
      table { background: #0c0 url(leaves.jpg) no-repeat bottom right }
      注意:当一个值未被指定时,将接受其初始值。例如,在上述的前三条规则,背景位置属性将被设置为0% 0%。为了避免与用户的样式表之间的冲突,背景和颜色应该一起被指定。

     

    展开全文
  • html背景图片自适应窗口大小

    万次阅读 多人点赞 2019-05-06 19:14:05
    会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background-size: cover; position: absolu...
  • 对与控件QPushButton中的可以使用setStyleSheet设置它背景图片。具体设置背景图片的方法有两种 self.button.setStyleSheet("QPushButton{background-image: url(img/1.png)}") 然而对于这种方法背景...
  • 本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css怎样设置背景图片? css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。 ...
  • IntelliJ IDEA 2018.2设置背景图片及透明度

    万次阅读 多人点赞 2018-07-27 12:41:50
    最近刚到一家公司,之前用的是MyEclipse2014,现在却要切换到IDEA上了,刚接触的时候,感觉黑色的界面很酷,不过时间久了就觉得有点太单调,所以就在网上看了一下如何设置背景图片,让一些还不会的童鞋可以做个参考哦. ...
  • Java 添加背景图片

    千次阅读 2019-02-14 15:14:28
    Java 添加背景图片
  • frameset如何添加背景图片是图片不是背景色,有大神在吗是在jsp界面中
  • idea 自定义背景图片

    万次阅读 热门讨论 2019-05-27 21:24:36
    今天发现个有趣的东西, idea可以自定义背景图片,先来上个图, 是不是很炫酷~ 接下来就是 装*时刻了 一、设置里面搜索Set Background Image ,右键点击第一个,给设置背景的方法添加个快捷键 随便设置一个...
  • 设置背景图片使用QPalette()函数 from PyQt5.Qt import * import sys app = QApplication(sys.argv) w = QWidget() w.resize(210, 280) palette = QPalette() pix=QPixmap("./qq.jpg") #pix = pix.scaled(w....
  • idea换背景图片

    千次阅读 2019-04-04 11:31:17
    idea换背景图片 idea插入背景图片使用快捷键来设置,因此先查看设置背景图片的快捷键是否设置,如果没有请先设置。 (1)设置换背景图片的快捷方式 使用Ctrl+Alt+S打开Setting界面,找到Keymap界面 在搜索框...
  • 背景图片 uni-app支持使用在 css 里设置背景图片,使用方式与普通web项目相同,需要注意以下几点: 支持 base64 格式图片。 支持网络路径图片。 使用本地路径背景图片需注意: 图片小于 40kb,uni-app会自动将...
  • echarts设置背景图片

    千次阅读 2019-08-20 16:37:29
    echarts设置背景图片的两种方法 方法一 var img = new Image(); img.src = ’ 图片的url’ img.width = ‘100%’ img.height =‘100%’ 在option中引用: option = { backgroundcolor:{ image:img } } 方法二 在div...
  • 设置主界面背景图片 1.首先准备两张Windows24位BMP(后缀为.bmp)的图片,找到创建的工程目录下的res文件夹,将图片复制粘贴到res文件夹下。 这里以美丽的精灵公主–丽芙·泰勒为背景。 这里以Photoshop为工具...
  • js更换背景图片

    千次阅读 2019-01-15 09:21:21
    js更换背景图片
  • 写CSS的时候会遇到这样一个需求,要求给背景图片加上一个“遮罩层”,看起来更符合页面的整体风格。 可以用背景图片和背景颜色融合来解决。 通常我们这样写:  .bgDiv {  background:rgba(255, 0, 0, 0.1), ...
  • 背景图片地址不能直接写在标签里面,要用data绑定 背景图的地址要加require 背景图要设置height属性 <div :style="bgImg"> </div> <script> let that; export default { data () ...
  • 二、样式及背景图片显示问题 1、修改单个页面的背景色: 在页面的wxss里面加上这句代码: page{ background-color: lightcyan; } 2、小程序中的颜色设置 //颜色不要加引号,也可以直接是英文 border-top:1...
  • js的window,print()打印背景图片 题目描述 js的window,print()打印背景图片给body加了图片地址之后,非要设置浏览器打印选项里面设置背景图形打印才行,怎么通过js去设置默认的就是打印带背景图像的 方法一 :...
  • JavaScript设置背景图片

    万次阅读 2018-01-09 17:01:05
    本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。 核心代码片段如下: [JavaScript] 纯文本查看 复制代码运行代码1odiv.style.backgroundImage="url('images/test.jpg')"; 下面给出一...
  • Django 添加背景图片

    千次阅读 2017-09-28 14:56:13
    Django 添加背景图片
  • css设置背景图片大小Introduction: 介绍: As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role...
  • 为matlab GUI添加背景图片

    万次阅读 多人点赞 2018-09-13 22:00:24
    为matlab GUI添加背景图片 为GUI添加一个背景图片,不仅可以让我们的界面变得漂亮大气上档次,而且软件对与用户的交互更加友好。用C或者C++写过软件界面的人都知道,这件事情可以轻而易举的办到,那么问题来了,...

空空如也

1 2 3 4 5 ... 20
收藏数 66,990
精华内容 26,796
关键字:

背景图片