<!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. iOS链接库的冲突

    最近在打包的时候,遇到一个坑.特此记录一下 起因是发现 Unity 5.4 版本,使用c#写的下载,下载速度无法突破 2M/s,同样的网络,后来横向对比使用原来 Cocos2d 开始的游戏,可以达到 ...

  2. C# ManualResetEventSlim 实现

    ManualResetEventSlim通过封装 ManualResetEvent提供了自旋等待和内核等待的组合.如果需要跨进程或者跨AppDomain的同步,那么就必须使用ManualResetEv ...

  3. MySQL出现Access denied for user ‘root’@’localhost’ (using password:YES)

    连接时MySQL出现了下面的错误: Access denied for user ‘root’@’localhost’ (using password:YES) 解决的办法是先停止MySQL服务,在m ...

  4. PL/SQL学习笔记之日期时间

    一:PL/SQL时间相关类型 PL/SQL提供两个和日期时间相关的数据类型: 日期时间(Datetime)数据类型 时间间隔类型 二:日期时间类型 datetime数据类型有: DATE TIMEST ...

  5. 转发：entos7修改文件夹权限和用户名用户组

    Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结.在命令行使用命令“ll”或者“ls -a”,可以查看文件或 ...

  6. Redis 的事务到底是不是原子性的

    ACID 中关于原子性的定义: 原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节.事务在执行过程中发生错误,会被恢复(Rollback)到事 ...

  7. Linux常用指令笔记

    目标:统计当前目录下java文件的个数 指令:`ls -R ./ | grep .java$ | wc -l` 原理:`ls -R ./`列出当前文件夹下的所有FILE,包括目录以及文件;`grep ...

  8. js中定义配置文件

    var config = (function($){ $.testConfig = { contextPath:'http://localhost:8080/test', maps:[ {id:'ma ...

  9. Linux系统时间同步方法小结

    在Windwos中,系统时间的设置很简单,界面操作,通俗易懂,而且设置后,重启,关机都没关系.系统时间会自动保存在BIOS时钟里面,启动计算机的时候,系统会自动在BIOS里面取硬件时间,以保证时间的不 ...

  10. Activity的Launch mode详解，A B C D的singleTask模式

    本文参考了此文http://hi.baidu.com/amauri3389/blog/item/a54475c2a4b2f040b219a86a.html 另附 android task与back s ...