背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。

background-size有3个属性:

  1. auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。 可以设置x和y的值,表示宽和高,设置宽度后,如果不设置高度,那么默认会是auto。

  2. cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且是等比例缩放,因为等比例缩放会超出某个div,超出部分会被隐藏。图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。

  3. contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。

css文件 如何使背景图片大小适应div的大小的更多相关文章

  1. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  2. PHP修改css文件中的背景图片并下载到本地

    扒网站当中一般css中的图片扒不下来,这个脚本就是用来下载这些图片到本地的 流程 1.获取css文件路径 2.打开文件逐行读取判断是否包含需要的图片 2.1 包含则 -进行截取直接获取到相对路径 2. ...

  3. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  4. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  7. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  8. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  9. 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

随机推荐

  1. Python 编程快速上手 第六章总结

    第六章 字符串操作 前言 这一章节讲了关于 Python 中字符串类型的知识.与字符串有关的操作符,方法等等. 处理字符串:字符串的写入.打印.访问的知识 原始字符串 格式:r'string'作用:在 ...

  2. LeetCode--011--盛最多水的容器(java)

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  3. p1465 Preface Numbering

    用这个函数转成罗马数字统计就行了. #include <iostream> #include <cstdio> #include <cmath> #include ...

  4. numpy---one

    import numpy as np #创建数组(给array函数传递Python序列对象) a = np.array([1,2,3,4,5]) b = np.array((1,2,3,4,5,6)) ...

  5. 以CapsNet为例谈深度学习源码阅读

    本文的参考的github工程链接:https://github.com/laubonghaudoi/CapsNet_guide_PyTorch 之前是看过一些深度学习的代码,但是没有养成良好的阅读规范 ...

  6. 6、DHCP

    DHCP 一.DHCP简介 1.什么是DHCP DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一种用户简化计算机IP地址管理的标准: 2.DHC ...

  7. Pascal's Triangle 2(leetcode java)

    问题描述: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return ...

  8. js中const、let、var的区别

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...

  9. array_column的作用

    从记录集中取出 last_name 列,用相应的 "id" 列作为键值: <?php // 表示由数据库返回的可能记录集的数组 $a = array( array( 'id' ...

  10. 51Nod 1001 数组中和等于K的数对

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1001一开始的想法是排序后二分搜索,发现会进行非常多不必要的遍历,十分耗时 ...