椰果粒
椰果粒

background-size

background-size规定背景图片的尺寸
值：

  • 默认值是auto
  • 自定义的长度和宽度——设置背景图片的宽度和高度，如果只设置一个，另一个会被设置为auto
  • 自定义百分比
  • cover——将图像扩展至能把整个区域覆盖掉，而多余的图片部分会隐藏
  • contain——将图片按照宽或者高进行缩放，使整个图片能在区域里显示



    
    background-size

contain
这是一张很宽的图，设置contain之后，高度部分多出来的会显示成空白（设置了no-repeat）

background-size_第1张图片
contain.png

这是一张很高的图，右半部分不够，就默认为白色
background-size_第2张图片
contain.png

这是一张合适的图
background-size_第3张图片
contain.png

cover
合适的图仍旧会铺满
很高的图，会左右铺满，上下部分多出来的就隐藏掉
background-size_第4张图片
image.png

很宽的图，上下铺满，左右多出来的隐藏掉
background-size_第5张图片
image.png

你可能感兴趣的:(background-size)

  • 前端学习——CSS W起名有点难 学习笔记前端学习css
    CSSCSS（CascadingStyleSheets）级联样式表语法选择器全局选择器元素选择器类选择器ID选择器合并选择器选择器的优先级字体属性字体颜色背景属性background-color属性background-image属性background-repeat属性background-size属性background-position属性文本属性text-aligntext-decorat
  • 当背景为两种颜色交替出现时？用重复性渐变实现 痛心凉
    重复性渐变cssdiv{background-image:linear-gradient(0deg,rgba(255,255,255,.2)50%,transparent50%,transparent);background-size:37px37px;background-color:#EBEBEB;//按需要改动背景色}
  • 使用vue2和css样式添加背景图片 Sky1900_ css前端css3html
    登录.ma{/*//这里地址是用项目中图片所在路径为准*/background:url("../assets/2.jpg");/*//将图片样式不重复*/background-repeat:no-repeat;/*//设置图片大小*/background-size:100%;/*设置全屏*/position:fixed;/*设置div高度*/height:100%;/*设置div宽度*/width
  • 【CSS】background样式没有生效 凭栏听雨客 假如我今天离职css前端
    1.问题背景设置了background-size:"100%100%"没有生效。background:`url(${this.getUrl(this.state.scenelist.length>1?item.bannerLongUrl:item.bannerShortUrl)})`,\background-size:"100%100%"2.分析2.1结论由于图片需要远程获取，如果先执行backg
  • background-size 子却
    规定背景图像的尺寸background-image:url("xxx");background-size:100px200px;其它属性background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域;注：背景图像的某些部分也许无法显示在背景定位区域中。background-size:containe;把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
  • Vue3背景设置 遇意 Vuecsscss3html
    图片存放在assets下样品展示html{width:100px;height:100px;}body{width:100px;height:100px;}#background{  //图片路径background-image:url("../assets/image/3379.jpg");width:100%;height:100%;position:fixed;background-size
  • css 背景图片居中显示 yhr19910929 vuecss
    经常用到css中背景图片居中显示，记录下，直接上代码：height:100%;width:100%;background-image:url("图片地址");background-repeat:no-repeat;background-position-x:center;background-position-y:center;background-size:100%100%;如果要保持图片的宽高
  • div设置background图片后怎么让图片铺满div fury_123 htmlcss前端
    可以使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果。具体的方法如下：1.首先，需要给这个div设置一个背景图片。可以使用background-image属性来完成。例如：div{background-image:url("图片路径");}2.接下来，需要设置背景图片的大小。可以使用background-siz
  • css 动画效果：水平直线来回运动：animation CAD GIS开发 css前端
    background:url(https://hao2.qhimg.com/t01b958e8662853d1c8.png)no-repeat;background-size:119px30px;color:#fff;display:inline-block;height:30px;width:119px;line-height:27px;position:absolute;left:-115px
  • 背景颜色和背景图片覆盖区域（CSS查漏补缺） hijackli
    文:jack同学jack同学背景颜色默认覆盖到border,而背景图片默认覆盖到padding。可以使用border-style:dashed测试查看(只针对块级元素不针对内联元素)设置属性background-clip:content-box/padding-box/border-box(默认);改变背景颜色覆盖区域设置属性background-size:100%/100px/contain;可
  • 移动端WEB开发 Mon trésor.88 前端javamysql
    目录一，meta视口标签二，物理像素（分辨率）与物理像素比三，二倍图二倍精灵图的做法四，背景缩放background-size五，移动端开发选择单独移动端页面（主流）响应式兼容PC移动端六，移动端技术解决方案七，特殊样式一，meta视口标签想要理想视口，就要给移动端页面添加meta视口标签属性解释说明width宽度设置的是viewport宽度，可以设置device-width特殊值initial-
  • 妙用 background 实现花式文字效果 狂徒_张三
    本文将讲解如何利用background系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到：通过background-size与background-position实现酷炫的文字下划线效果通过background-size与background-position以及background-clip实现文字逐个渐现的效果通过animation-delay实现文字的渐现效果起因写本文的动机是
  • 【网页设计】春节页面背景模板 a辰龙a javascript开发语言前端
    无偿下载地址：https://download.csdn.net/download/weixin_47040861/888111431.实现效果2.代码1.html春节2.css*{margin:0;padding:0;}html,body{height:100%;}body{background-image:url(./image/bg.png);background-size:100%100%
  • CSS-背景的相关属性 大庆无疆
    1、背景尺寸属性专门用于设置背景图片的大小background-size:取值：（1）宽高（可为具体像素或百分比）（2）auto高（宽度随高度的变化等比例拉伸）（3）宽auto（高度随宽度的变化等比例拉伸）（4）contain(告诉系统背景图片要等比例拉伸，宽高有一个填满便不再拉伸)（5）cover(告诉系统背景图片要等比例拉伸，并且宽高都要填满才停止)2、背景图片定位区域属性：告诉系统背景图片从
  • JS实现简易的坦克发射(发射子弹) bestvous
    键盘事件和组合键*{margin:0;padding:0;}#div1{width:40px;height:40px;position:absolute;background:url(tank.png);background-size:100%;/*background:orange;*/transform:rotate(0deg);}.pd{width:5px;height:15px;borde
  • CSS 星空按钮 特创数字科技 CSS动画css前端
    星空按钮body{background-color:#212121;}.btn{margin-top:300px;display:flex;justify-content:center;align-items:center;width:10rem;overflow:hidden;height:3rem;background-size:300%300%;backdrop-filter:blur(1r
  • 13.CSS学习（四） Kylincsg 从零教你学Web前端css学习前端笔记经验分享css3其他
    上一篇：12.CSS学习（三）CSS学习CSS3层次选择器属性选择器伪元素选择器权重值圆角阴影文本阴影盒子阴影背景background-size背景大小background-origin背景原点background-clip背景裁剪background-image背景图片滤镜几个透明度设置的区别动态计算函数渐变线性渐变径向渐变重复渐变css3变量倒影设置盒模型过渡定义过渡的属性定义过渡持续时间定义
  • CSS3背景 LorenSLJ
    CSS3background-size属性background-size属性规定背景图片的尺寸。在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。IE9+、Firefox4+、Opera、Chrome以及Safari5+支持background-size属性。div{background:url(img_flw
  • 小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白 wx_caiji
    1、fixed定位一个image标签，width:100vw;height:100vh;mode选择aspectFill2、background-size:cover1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。
  • CSS Day9-CSS新样式 2301_76534754 csscss3html5
    9.1背景相关属性背景图片background-imageurl引入图片地址展示特点：由上到下，由左到右依次排列背景图大小background-sizebackground-size：宽高；（相比这个最优）background-size：cover；图片展示不全background-size：contain；图片平铺背景平铺background-repeatbackground-repeat：re
  • css 背景图片随屏幕大小自适应全屏 陈皮太 css
    body{min-height:500px;background:url(/xd/resources/new/uploadimage/form_bg_new.png)no-repeatlefttop!important;background-size:auto!important;overflow:hidden;background-repeat:repeat!important;backgrou
  • 一个Python网站。 bicart csscss3html
    本文使用创作助手。HTML文件（index.html）：bicart介绍body{background-color:#f5f5f5;background-image:url("/static/background_image.jpg");background-size:cover;background-position:center;}.nav{background-color:#333;over
  • css 3D立体动画效果怎么转这个骰子才能看到5 与妖为邻 css3d前端
    css3D立体动画效果怎么转这个骰子才能看到53D效果认知:使用transform实现3D立方体*{margin:0auto;padding:0;}body{background:#fffdfd;}h1{text-align:center;color:#c16f6f;}pre{background-size:800px400px;padding:20px;/*文字大小*/font-size:18p
  • 详解background（background-color background-clip background-image 渐变函数）[第一天] PBitW 重学前端2csscss详解background详解css3渐变重复性渐变参数详解css实现渐变文字
    文章目录backgroundbackground-colorbackground-clipbackground-imagebackground-repeat（平铺）background-position（背景位置）background-size（背景图大小）background-attachment（固定或滚动）渐变函数linear-gradient()[线性渐变]css3实现字体渐变色radia
  • HTML——文字水印 一只漫步前行的羊 htmlhtml前端javascript
    .waterSeal{background-image:url('data:image/svg+xml;utf8,文字印'),url('data:image/svg+xml;utf8,文字印');background-size:150px140px;pointer-events:none;}
  • 案例-自定义一个右键菜单 kino2046
    （另一种笔记里找）自定义右键body{width:100vw;height:100vh;background:url(./imgs/bg.png)no-repeat;background-size:100%100%;position:relative;}#list{margin:0;padding:0;list-style:none;width:180px;height:200px;positio
  • HTML登录页面透明样式 它朝若是 C#html前端javascript
    html登录中心名称：密码：注册用户style样式body{height:100%;background-image:url("/Content/img/bg1.jpg");background-size:cover;background-repeat:no-repeat;position:relative;}form{border-radius:8px;//圆角width:465px;heigh
  • Vue 实现卡片切换动画+input模糊搜索的字匹配正则变色 上优 vue.jsjavascriptecmascript
    Document-->*{margin:0;padding:0;box-sizing:border-box;}.left_container{background:url('https://images8.alphacoders.com/132/thumbbig-1323361.webp')no-repeatcentercenter;background-size:cover;border-rad
  • JavaScript复习小案例 爱吃java的羊儿 javascriptjavascript开发语言ecmascript
    JavaScript实现简易留言板效果图完整代码留言板body{background-color:#f4f4f4;}/*外部容器样式设置*/.wrapper{width:400px;height:500px;background-image:url(../img/689334441.jpg);background-size:contain;border-radius:15px;opacity:.6
  • 2020-07-08-New Begin11 RyuukoGYC
    块行内行内块行高：基线与基线之间的距离如图CSS背景背景颜色背景图片背景平铺案例背景附着背景简写如图background-size:xy背景图片大小如图背景透明如图总结总结CSS三大特性层叠性：就近原则继承性继承性优先级如图注意：继承的权重为0注意总结略CSS盒子模型border：如图分别指定边框宽度如图改变表单控件边框如图border：none；四个边框都没有表格的细线边框
  • 怎么样才能成为专业的程序员？ cocos2d-x小菜 编程PHP
      如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为
  • java web开发 高并发处理 BreakingBad javaWeb并发开发处理高
    java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（
  • mysql批量更新 ekian mysql
    mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values
  • 微软BI（3） 18289753290 微软BI SSIS
    1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是
  • Java中的List g21121 java
            List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复
  • 读书笔记 永夜-极光 读书笔记
       1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs
  • centos 安装 Codeblocks 随便小屋 codeblocks
    1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w
  • 23种设计模式的形象比喻 aijuans 设计模式
    1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：
  • 开发管理 CheckLists aoyouzi 开发管理 CheckLists
    开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C
  • js实现切换 百合不是茶 JavaScript栏目切换
    js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di
  • 周鸿祎在360新员工入职培训上的讲话 bijian1013 感悟项目管理人生职场
            这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &
  • 前端Web开发的页面效果 Bill_chen htmlWebMicrosoft
    1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标
  • 【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC) bit1129 垃圾回收
      CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执
  • Struts2技术总结 白糖_ struts2
      必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          
  • Jquery easyui layout应用注意事项 bozch jquery浏览器easyuilayout
    在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出
  • java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ bylijinnan java
    public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝
  • color Chen.H JavaScripthtmlcss
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs
  • [信息与战争]移动通讯与网络 comsci 网络
          两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&
  • oracle flashback query(闪回查询) daizj oracleflashback queryflashback table
    在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas
  • zeus持久层DAO单元测试 deng520159 单元测试
    zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o
  • C语言学习三printf函数和scanf函数学习 dcj3sjt126com cprintfscanflanguage
    printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf
  • 那你为什么小时候不好好读书? dcj3sjt126com life
    dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没
  • iptables开放端口 Fanyucai linuxiptables端口
    1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables
  • Ehcache（05）——缓存的查询 234390216 排序ehcache统计query
    缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &
  • 通过hashset找到数组中重复的元素 jackyrong hashset
      如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0
  • 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL lanrikey history
    后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
  • 应用程序的通信成本 netkiller.github.com 虚拟机应用服务器陈景峰netkillerneo
    应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置
  • 一维数组与二维数组的声明与定义 恋洁e生 二维数组一维数组定义声明初始化
    /**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c
  • Spring Mybatis独立事务配置 toknowme mybatis
    在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n
  • 更新Anadroid SDK Tooks之后，Eclipse提示No update were found xp9802 eclipse
    使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found 
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他