<!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. NDVI等植被相关指数

    一.基础概念 NDVI(Normalized Difference Vegetation Index,归一化差分植被指数,标准差异植被指数),植被覆盖指数.也称为生物量指标变化,可使植被从水和土的图像 ...

  2. SpringBoot读取配置文件（从classpath/file读取yml/properties文件)

    一.读取properties文件 使用配置项@PropertySource   二.读取yml文件 启动类添加下面代码: @Bean public static PropertySourcesPlac ...

  3. CSS魔法堂：那个被我们忽略的outline

    前言  在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...

  4. gpg使用说明

    http://blog.163.com/ywz_306/blog/static/13257711201121921452480/

  5. 您的第一个C++Builder程序（Hello, world!）

    最近有些老旧的项目是C++Builder开发的,虽然和Delphi的IDE的界面和操作十分相似,但是还是找本<C++ Builder 5 Developer's Guide>来看看熟悉下, ...

  6. docker中mysql数据库的数据导入和导出

    导出数据 查看下 mysql 运行名称 docker ps 结果:  执行导出(备份)数据库命令: 由第一步的结果可知,我们的 mysql 运行在一个叫 mysql_server 的 docker ...

  7. 对Rethinking ImageNet Pre-training的理解

    Kaiming He的这篇论文提出了一个新问题,在目标检测.实例分割和人体关键点检测等领域,预训练的模型是否真的起了作用?通过实验,得出结论:迭代次数较少时,使用预训练模型效果更好:但是只要迭代次数充 ...

  8. linux 通过nvm安装node

    官方介绍:https://github.com/creationix/nvm#installation PS:通常不要用root权限安装软件,因为线上任何服务部署都不允许用root,其他软件用root ...

  9. 表表达式，Substring, CharIndex, 多行数据变同一行的用法

    参考: https://www.cnblogs.com/cnki/p/9561427.html https://www.cnblogs.com/johnwood/p/6386613.html 1.表1 ...

  10. Vue2的独立构建与运行时构建的差别

    其实这个问题在你使用vue-cli构建项目的时候是不会出现的,因为你在创建项目的构建过程中已经让你勾选了,然后会写入webpack.config.js中. 这就在这,会让你选择Vue的构建方式. 如果 ...