css背景图撑开盒子高度
<!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背景图撑开盒子高度的更多相关文章
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- css背景图充满屏幕
代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- CSS背景图怎么自适应全屏(手机或者电脑)
#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...
随机推荐
- PHP06
PHP06 1. 2.可视化工具navicat: 1)查询 : select 字段名1,字段名2- from 表名; 对于可能与关键词重名的名称,建议使用反引号`括起来 可用*通配符代替字段名 sel ...
- JSP(8)—EL案例和JSTL案例
1.EL案例 el.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- pygame-KidsCanCode系列jumpy-part7-游戏启动/结束画面
通常一个游戏启动(start)或结束(game over)时,都会显示一个画面,来引导用户.这节,我们学习如何处理这块逻辑. 其实之前,我们已经预留了2个函数,只要把它实现即可: def show_s ...
- Css3实现波浪效果2
一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...
- one-stage object detectors(1)
2019/04/08 强烈推荐:深入理解one-stage目标检测算法 yolo系列 one-stage object detectors(YOLO and SSD) 在不专一的模型中,每个检测器应该 ...
- Redis接口的调用
1.hiredis是redis数据库的C接口,目录为/redis-3.2.6/deps/hiredis 2.示例代码如下: #include <stdio.h> #include < ...
- [android警告]AndroidManifest.xml警告 Not targeting the latest versions of Android
警告:Not targeting the latest versions of Android; compatibility modes apply.Consider testing and upda ...
- go微服务框架go-micro深度学习-目录
go微服务框架go-micro深度学习(一) 整体架构介绍 go微服务框架go-micro深度学习(二) 入门例子 go微服务框架go-micro深度学习(三) Registry服务的注册和发现 go ...
- [转]PID控制算法原理
PID控制算法是工业界使用极其广泛的一个负反馈算法,相信这个算法在做系统软件时也有用武之处,这里摘录了知乎上的一篇文章,后面学习更多后自己总结一篇 以下为原文: PID控制应该算是应用非常广泛的控制算 ...
- Eclipse SVN clean up失败解决方法
错误信息: 1.下载sqlite3.zip (https://www.sqlite.org/2019/sqlite-tools-win32-x86-3270200.zip) 只需用到解压后的exe文 ...