<!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. 【最大公约数&链表】权值 @upcexam5921

    时间限制: 1 Sec 内存限制: 512 MB 题目描述 给定一个长为n的正整数序列Ai.对于它的任意一个连续的子序列{Al, Al+1, …, Ar},定义其权值W (l, r)为其长度与序列中所 ...

  2. GMA Round 1 数列求和(Hard)

    传送门 数列求和(Hard) 在数列{$a_n$}中,$a_1=-\frac{1}{4}$,$\frac{1}{a_{n+1}}+\frac{1}{a_n}=\begin{cases}-3(n为偶数) ...

  3. CMD 命令2

    cd  %~dp0 切换到当前脚本所有目录 批处理常用命令总结 - 批处理命令简介 目录 echo 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. ech ...

  4. Delphi提取PDF文本

    生成PDF的控件很多,但解析的不是太多,pdf Toolkit可以,但测试的第一个复杂的pdf就报告错误,并且汉字乱码,可能使用的版本或使用方法不对. 想起之前使用java调用的Apache名下的pd ...

  5. TensorFlow+Keras 02 深度学习的原理

    1 神经传递的原理 人类的神经元传递及其作用: 这里有几个关键概念: 树突 - 接受信息 轴突 - 输出信息 突触 - 传递信息 将其延伸到神经元中,示意图如下: 将上图整理成数学公式,则有 y = ...

  6. springboot整合三 共享session，集成springsession

    官网介绍 - spring:session:https://docs.spring.io/spring-session/docs/current/reference/html5/ 1. Mave依赖 ...

  7. linux源码安装服务器所需要的一些依赖库（待完善）

    apaeche :yum -y install gcc gcc-c++ zlib zlib-devel openssl openssl-devel cmake kernel-devel pcre-de ...

  8. C++学习的书籍

    https://www.ossblog.org/master-c-programming-with-open-source-books/

  9. 【原创 Hadoop&Spark 动手实践 5】Spark 基础入门，集群搭建以及Spark Shell

    Spark 基础入门,集群搭建以及Spark Shell 主要借助Spark基础的PPT,再加上实际的动手操作来加强概念的理解和实践. Spark 安装部署 理论已经了解的差不多了,接下来是实际动手实 ...

  10. vue的js文件中获取vue实例

    1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...