<!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. modelform的操作以及验证

    1,model的两个功能 1,数据库操作 2,验证只有一个clean方法作为钩子来操作,方法比较少 2,form(专门用来做验证的) 根据form里面写的类,类里面的字段,这些字段里有内置的的正则表达 ...

  2. linux 下通过xhost进入图形界面，经常会出现报错“unable to open display”

    linux 下通过xhost进入图形界面,经常会出现报错“unable to  open display” linux下的操作步骤如下: [root@localhost ~]# vncserver N ...

  3. C# 实现Remoting双向通信

    本篇文章主要介绍了C# 实现Remoting双向通信,.Net Remoting 是由客户端通过Remoting,访问通道以获得服务端对象,再通过代理解析为客户端对象来实现通信的 闲来无事想玩玩双向通 ...

  4. Java知识回顾 （9） 同步、异步IO

    一.基本概念 同步和异步: 同步和异步是针对应用程序和内核的交互而言的. 同步指的是用户进程触发IO 操作并等待或者轮询的去查看IO 操作是否就绪: 而异步是指用户进程触发IO 操作以后便开始做自己的 ...

  5. UML建模——用例图（Use Case Diagram）

    用例图主要用来描述角色以及角色与用例之间的连接关系.说明的是谁要使用系统,以及他们使用该系统可以做些什么.一个用例图包含了多个模型元素,如系统.参与者和用例,并且显示这些元素之间的各种关系,如泛化.关 ...

  6. 《软件性能测试与LoadRunner实战教程》喜马拉雅有声图书上线

    工作忙的同学们有福了,可以听书了. 于涌老师的<软件性能测试与LoadRunner实战教程>喜马拉雅有声图书上线.

  7. Docker国内镜像source

    现在使用docker的镜像大多基于几种基本Linux系统.虽然我不需要在容器李安装很多东西,但经常需要一些必要的工具,而基础镜像里并不包含,比如vim, ifconfig, curl等.考虑下载速度, ...

  8. grid - 隐式地命名网格区域名称

    通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...

  9. 使用Mybatis时mybatis-config.xml配置中"configuration" 的内容必须匹配 (.....)解决方案

    一.简述 使用Mybatis配置mybatis-config配置文件时,经常遇到下列报错信息:org.xml.sax.SAXParseException; lineNumber: 36; column ...

  10. Java之Servlet

    Servlet规范了JavaWeb项目的结构Servlet的规范约束了服务器如何来实现Servlet规范,如何解析JavaWeb项目的结构. Java就是通过接口来约束 Servlet规范的jar就在 ...