css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。
background-size有3个属性:
auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。 可以设置x和y的值,表示宽和高,设置宽度后,如果不设置高度,那么默认会是auto。
cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且是等比例缩放,因为等比例缩放会超出某个div,超出部分会被隐藏。图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。

css文件 如何使背景图片大小适应div的大小的更多相关文章
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- PHP修改css文件中的背景图片并下载到本地
扒网站当中一般css中的图片扒不下来,这个脚本就是用来下载这些图片到本地的 流程 1.获取css文件路径 2.打开文件逐行读取判断是否包含需要的图片 2.1 包含则 -进行截取直接获取到相对路径 2. ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
- vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...
- CSS background-color 、image 背景图片
背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明 适用于:所有元素 继承性:无 动画性:是 计算 ...
- 不用css样式表和背景图片实现圆角矩形,超简洁!
当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...
随机推荐
- FreeRTOS
一.内核配置 1.configUSE_PREEMPTION 设置为1,使用抢先式内核:设置为0,为合作轮转内核. 2.configCPU_CLOCK_HZ 内部处理器执行的频率.这个值需要正确配置外围 ...
- MySQL utf8 和 utf8mb4 的区别
utf-8 时变化长度的编码,储存一个code point 需要1~4个字节. 然而,mysql的utf8只存储最多3个字节per code point. 所以,utf8字符集不能存储所有的unico ...
- dsu on tree练习
dsu on tree主要是处理一些有根树子树询问的操作, 作用与点分治和线段树合并类似. 一般无根树询问所有树链信息的直接就点分了, 有根树的话一般用线段树合并或dsu on tree, 线段树合并 ...
- 浅谈线程runnable和callable的使用及区别
线程使用比较广泛,但实际上一般项目很少用上线程,线程常用于优化复杂的程序执行流程,把一些与业务关系关系不大但是必须要执行的流程使用线程的方式让子线程去执行,主流程只返回跟业务有关的信息 runnabl ...
- NABCD框架(作业和事件的定期提醒)及第八周学习进度条
NABCD框架(作业和事件的定期提醒): N(need,需求): 你的创意解决了用户的什么需求? 我们的创意能够一定程度上督促我们的用户(学生)尽快完成自己近期的任务或者是作业.我们认为如果增设定时提 ...
- chrome 浏览器去掉输入框背景透明色
chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景: 这个黄色背景是谷歌浏览器默认的样式 user agent stylesheet ...
- leetcode-algorithms-8 String to Integer (atoi)
leetcode-algorithms-8 String to Integer (atoi) Implement atoi which converts a string to an integer. ...
- 使用antd-mobile的ImagePicker组件实现图片的上传
这篇文章主要是记录一下在开发钉钉微应用时,实现图片上传及显示功能的过程. 这个项目用的dingyou-dingtalk-mobile这个脚手架,可直接在NowaGui上创建.这是一个关于钉钉微应用的脚 ...
- UI界面按钮增强
(我是菜鸟,知道的少) 1.有HTML页面代码的,可以编辑 <%@page language="abap" %> <%@extension name=" ...
- MRBS开源会议室预订系统安装
MRBS系统官方网址 https://mrbs.sourceforge.io/ 最近在找一份开源的会议室预订系统,找了很多种,ASP,PHP的,测试发现MRBS无疑是最好的.开源社区对其介绍如下:M ...