<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>背景图撑开盒子高度</title>

    <style>

        .bg-box {

            background-image: url(../demo.jpg);

            background-size: 100% 100%;

            background-repeat: no-repeat;

            margin:0 auto;

        }

        .bg-box::after {

            content: "";

            display: block;

            /*这里的padding =  height / width*/

            padding:20%;

        }

    </style>

</head>

<body>

    <div class="bg-box"></div>

</body>

</html>

 

css背景图撑开盒子高度的更多相关文章

  1. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  2. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  3. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  4. css背景图等比例缩放，盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

  5. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. css背景图充满屏幕

    代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...

  8. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  9. CSS背景图怎么自适应全屏（手机或者电脑）

    #demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...

随机推荐

  1. 在Ubuntu1404的64bit版本下安装caffe

    原创文章,未经允许不要转载   想安装很久了,一直到这时才开始安装,我是笔记本华硕FL5800L的,所以配置比较低.在win7 64位里面先装个vmware 12 pro,然后装了个Ubuntu140 ...

  2. dubbo常见错误

    1.dubbo zookeeper注册中心provider的ip地址为内网ip,导致consumer连不上 我用的阿里云的服务器,host默认配置了内网ip,注销或删除即可 vim /etc/host ...

  3. 每天一个linux命令(17):whereis

    1.命令简介         whereis (whereis) 命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径.         whereis命令只能用于程序名的搜索,而且 ...

  4. 解决Linux文件系统变成只读的方法

    解决Linux文件系统变成只读的方法   解决方法 1.重启看是否可以修复(很多机器可以) 2.使用用 fsck – y /dev/hdc6 (/dev/hdc6指你需要修复的分区) 来修复文件系统 ...

  5. ffmpeg 、Vlc参数

    ffmpeg.exe -loglevel error -probesize 32 -vsync passthrough -framerate 20 -f gdigrab -i desktop -fil ...

  6. nginx（二）支持websocket配置

    在默认的配置nginx.conf文件中做如下配置改动 一.http域的设置 http { include mime.types; default_type application/octet-stre ...

  7. 转：关于S参数的一些理解

    关于S参数的一些理解 http://rf.eefocus.com/module/forum/thread-596241-1-1.html 台湾工程师图文独特讲解:S参数http://rf.eefocu ...

  8. 【Android开发坑系列】之事件分发机制

    总结一下: 事件序列的定义:从手触摸屏幕(含)到离开屏幕(含)期间所发生的一系列交互事件.主要由ACTION_DOWN.ACTION_MOVE.ACTOIN_UP.ACTION_CANCEL等组成,其 ...

  9. CentOS5.5上安装Python2.7及ez_setup和pip包

    CentOS5.5上安装Python2.7及ez_setup和pip包 下载 首先从Python官方下载源代码包下载 编译安装 这里将python安装到/opt/python27文件夹下 tar xv ...

  10. UltraVNC 简体中文版 1.2.2.1

    1.专门针对WinXP进行编译,同时适用XP之后的Windows版本(XP/Vista/8.1/10/2003/2008/2012): 2.配置低的计算机,Win8.1之前的系统,需要安装Mirror ...