<!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. 小甲鱼Python第四讲课后习题

    1while语句中,当条件为真时,它会一直循环下去,比如下面的例子,不过可以用Ctral + C来强制结束 while 'C': print("i love you") 2.观察打 ...

  2. 招聘移动APP、接口、自动化、性能和安全方面的兼职测试讲师

    只要您在移动APP.接口.自动化.性能和安全方面有丰富的测试经验,我们都欢迎您能加入我们,成为我们的兼职测试讲师,我们可以提供给您一份优厚的薪资,同时能在行业发展.企业培训.授课经验.出版专业著作等方 ...

  3. ChartControl控件0和null的效果

    DevExpress的ChartControl虽然还不能完全代替Office图表(例如它暂时不支持添加数据表),但它算同类产品中相当优秀的了,下面是对0值和空值的处理. DataTable zeroD ...

  4. gmock

    https://www.cnblogs.com/welkinwalker/archive/2011/11/29/2267225.html http://www.cnblogs.com/jycboy/p ...

  5. C#模拟客户端发送数据示例

      在给一些客户端做服务器端支持时,发现他们提交上来的数据大都不是http请求格式,因而使用Request.Form获取不到内容,今天用C#做下模拟,并演示下数据接收. 1.发送文本 1).客户端发送 ...

  6. PHP异步扩展Swoole笔记(2)

    dispatch_mode, 数据包分发策略 可以选择7种类型,默认为21,轮循模式,收到会轮循分配给每一个Worker进程2,固定模式,根据连接的文件描述符分配Worker.这样可以保证同一个连接发 ...

  7. CSS3制作图形大全——碉堡了

    为方便观看效果图,请移步原文:https://www.jqhtml.com/8045.html Square   #square {     width: 100px;     height: 100 ...

  8. 微信小程序官方DEMO解读

    我们在开始微信小程序开发的时候,对JS,HTML等前端知识一无所知,完完全全就是门外汉在尝试一个新的方向. 在下载好开发工具,微信就已经提供了一个DEMO例子: 从程序开发的角度来看这个陌生的目录结构 ...

  9. [elk]kafka_elk

    kafka https://www.tutorialspoint.com/apache_kafka/apache_kafka_cluster_architecture.htm https://dzon ...

  10. easyui中combobox 取值

    <input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainTyp ...