精华内容
下载资源
问答
  • 错误的写法:加到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>
    
    展开全文
  • HTML设置背景颜色及背景图片

    千次阅读 2020-08-26 23:17:27
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素,将会一个部分背景无法完全显示 - 如果背景...

    背景

    background-color 设置背景颜色

    background-color: red;

    background-image 设置背景图片

    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
    - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
    - 如果背景的图片大于元素,将会一个部分背景无法完全显示
    - 如果背景图片和元素一样大,则会直接正常显示
    background-image: url("./img/1.png");       
    
    • background-repeat 用来设置背景的重复方式
      可选值:
      repeat 默认值 , 背景会沿着x轴 y轴双方向重复
      repeat-x 沿着x轴方向重复
      repeat-y 沿着y轴方向重复
      no-repeat 背景图片不重复

    • background-position 用来设置背景图片的位置
      设置方式:
      通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
      使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center

      通过偏移量来指定背景图片的位置:
      水平方向的偏移量 垂直方向变量
      或者: background-position: -50px 300px;

    • 设置背景的范围 background-clip

      • 可选值:
        border-box 默认值,背景会出现在边框的下边
        padding-box 背景不会出现在边框,只出现在内容区和内边距
        content-box 背景只会出现在内容区
        如:background-clip: content-box;
    • background-origin 背景图片的偏移量计算的原点
      padding-box 默认值,background-position从内边距处开始计算
      content-box 背景图片的偏移量从内容区处计算
      border-box 背景图片的变量从边框处开始计算
      如:background-origin: border-box;

      background-size 设置背景图片的大小
      第一个值表示宽度
      第二个值表示高度

      • 如果只写一个,则第二个值默认是 auto

      cover 图片的比例不变,将元素铺满
      contain 图片比例不变,将图片在元素中完整显示

    • 总结
      background-color
      background-image
      background-repeat
      background-position
      background-size
      background-origin
      background-clip
      background-attachment

    • backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
      并且该样式没有顺序要求,也没有哪个属性是必须写的

    • 注意:
      background-size必须写在background-position的后边,并且使用/隔开
      background-position/background-size

      background-origin background-clip 两个样式 ,orgin要在clip的前边

    • background-attachment

      • 背景图片是否跟随元素移动
      • 可选值:
        scroll 默认值 背景图片会跟随元素移动
        fixed 背景会固定在页面中,不会随元素移动

    渐变

    通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果
        渐变是图片,需要通过background-image来设置
    

    linear-gradient()

    线性渐变,颜色沿着一条直线发生变化
    
    linear-gradient(red,green) 红色在开头,绿色在结尾,中间是过渡区域
    - 线性渐变的开头,可以指定一个渐变的方向
        to left
        to right
        to bottom
        to top
        deg deg表示度数
        turn 表示圈
    
    - 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,
        也可以手动指定渐变的分布情况
    如:background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
    - repeating-linear-gradient() 可以平铺的线性渐变 
    

    radial-gradient() 径向渐变(放射性的效果)

    默认情况下径向渐变的形状根据元素的形状来计算的
    正方形 --> 圆形
    长方形 --> 椭圆形
    - 我们也可以手动指定径向渐变的大小
    circle 圆形
    ellipse 椭圆形
    
    - 也可以指定渐变的位置
    - 语法:
        radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
            大小:
                circle 圆形
                ellipse 椭圆
                closest-side 近边	
                closest-corner 近角
                farthest-side 远边
                farthest-corner 远角
    
            位置:
                top right left center bottom 
    如:background-image: radial-gradient(farthest-corner at 100px 100px, red , yellow)
    
    展开全文
  • 背景图片定位

    千次阅读 2018-08-28 13:29:16
    1: 网页中的装饰性的图片,通过背景图片添加。 2:用户图片,通过插入形式添加。 3:按钮,有多个状态的效果图片,通过背景图片添加。 三、 背景图片定位决定因素:   a. 设置背景图片容器的大小(宽度和...
  • idea 自定义背景图片

    万次阅读 多人点赞 2019-05-27 21:24:36
    今天发现个有趣的东西, idea可以自定义背景图片,先来上个图, 是不是很炫酷~ 接下来就是 装*时刻了 一、设置里面搜索Set Background Image ,右键点击第一个,给设置背景的方法添加个快捷键 随便设置一个...
  • 本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 更多相关视频: 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发:BV1C54y1X7ro 前端发展...
  • 对与控件QPushButton中的可以使用setStyleSheet设置它背景图片。具体设置背景图片的方法有两种 self.button.setStyleSheet("QPushButton{background-image: url(img/1.png)}") 然而对于这种方法背景...
  • style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; } ...css代码添加背景图片常用代码 1 背景颜色 {
  • 本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css怎样设置背景图片? css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。 ...
  • 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...
  • 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...
  • 微信小程序css设置本地背景图片

    万次阅读 2019-05-07 14:48:00
    微信小程序中,直接在css中直接使用本地图片为view设置背景图片: <style> div{ width: 500px; height: 500px; } .box1{ background-image: url(../../image/alltest_bag.jp...
  • Java 添加背景图片

    千次阅读 2019-02-14 15:14:28
    Java 添加背景图片
  • frameset如何添加背景图片是图片不是背景色,有大神在吗是在jsp界面中
  • 设置背景图片使用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....
  • matplotlib绘图太单调? 自定义背景图片吧!

    千次阅读 多人点赞 2021-04-29 22:08:08
    读者朋友们好,今天分享 matplotlib 自定义背景图片。 本文讲一下如何使用matplotlib 在自定义背景上进行图像绘制。比如下方的图片就是在找好背景图之后,使用matplotlib绘制而成 其实呢,使用自定义背景是非常...
  • CSS3允许我们在一个元素上添加多个图片多重背景图片<div class="demo"></div>.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; }多重背景可以把多个图片...
  • 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...
  • idea换背景图片

    千次阅读 2019-04-04 11:31:17
    idea换背景图片 idea插入背景图片使用快捷键来设置,因此先查看设置背景图片的快捷键是否设置,如果没有请先设置。 (1)设置换背景图片的快捷方式 使用Ctrl+Alt+S打开Setting界面,找到Keymap界面 在搜索框...
  • 设置主界面背景图片 1.首先准备两张Windows24位BMP(后缀为.bmp)的图片,找到创建的工程目录下的res文件夹,将图片复制粘贴到res文件夹下。 这里以美丽的精灵公主–丽芙·泰勒为背景。 这里以Photoshop为工具...
  • js更换背景图片

    千次阅读 2019-01-15 09:21:21
    js更换背景图片
  • 背景图片 uni-app支持使用在 css 里设置背景图片,使用方式与普通web项目相同,需要注意以下几点: 支持 base64 格式图片。 支持网络路径图片。 使用本地路径背景图片需注意: 图片小于 40kb,uni-app会自动将...
  • 目录前言步骤扩展安装主题及背景设置自定义背景图片字体符号美化不足之处 前言 版本 visual studio 2019 系统 windows 成品效果 步骤 扩展安装 在上方找到 扩展–管理扩展 点击进入 在右上角搜索处找到并下载 ...
  • 背景图片地址不能直接写在标签里面,要用data绑定 背景图的地址要加require 背景图要设置height属性 <div :style="bgImg"> </div> <script> let that; export default { data () ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,164
精华内容 33,665
关键字:

背景图片