css如何设置背景图片大小

在css中控制插入背景图片的大小用background-size属性。

background-size语法:background-size: length|percentage|cover|contain;

length用法:

(相关课程推荐:css视频教程)background-size:100px; //背景图片显示的宽和高为100像素

background-size:100px 160px;//背景图片显示的宽为100像素,高为600像素

percentage用法:background-size:60%; //背景图片的显示宽度和高度是图片大小60%;

background-size:60% 80%; // 背景图片的显示宽度是图片大小的60%,高度是80%;

cover用法:background-size:cover;// 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

// 背景图像的某些部分也许无法显示在背景定位区域中。

contain用法:background-size:contain; //把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

本文来自css3答疑栏目,欢迎学习!

html调整背景页面的大小,css如何设置背景图片大小相关推荐

  1. div怎么在css中设置字体大小,css如何设置div字体大小

    css设置div字体大小的方法是,给div字体添加font-size属性,并且设置合适的字体大小即可,例如[div {font-size:200%;}]. 本文操作环境:windows10系统.css ...

  2. css怎么设置背景图片自适应大小

    在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...

  3. YDOOK : CSS div 设置背景图片大小自动缩放

    YDOOK : CSS div 设置背景图片大小自动缩放 设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...

  4. 怎么把html背景图片,css如何设置背景图片?

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...

  5. css如何设置背景图片?background属性添加背景图片

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...

  6. 如何给HTML文件加一张背景图,如何在css中添加背景图?

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...

  7. html设置顶部背景颜色,css怎么设置背景颜色?

    css怎么设置背景颜色?下面本篇文章就来给大家介绍一下使用CSS设置背景颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-colo ...

  8. 用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏?附源码!...

    不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...

  9. php图片背景平铺,css如何设置背景图片的平铺方式?css设置背景图片平铺的方法(图文详解)...

    css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺.垂直方向平铺,或者是不平铺的方法.有一定的参考价值,有需要的朋友可以 ...

  10. php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...

    在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...

最新文章

  1. R语言中的dnorm(),pnorm(),qnorm(),rnorm()的解释
  2. ubuntu-15.10-server-i386.iso 安装 Oracle 11gR2 数据库
  3. iOS边练边学--iOS中的XML数据解析
  4. 左操作数必须为左值_进入“左转弯待转区”被罚怎么回事?
  5. AI到底有多吃香?推荐一个斯坦福、CMU、清北学生都在上的AI课
  6. C语言试题四十三之求出ss所指字符串中指定字符的个数,并返回此值。
  7. [数据结构]链表中销毁和清空的区别
  8. remmima 不能保存_Vue项目实现表单登录页保存账号和密码到cookie功能_婳祎_前端开发者...
  9. IOT(2)---物联网传感器1
  10. javascript的compile()函数使用
  11. 首次将项目从eclipse提交到服务器的SVN
  12. (新手)使用pandas操作EXCEL
  13. word多个文档标签显示在一个窗口
  14. Web前端常用CDN网站汇总
  15. 图片验证码识别教程技术原理分析
  16. linux动态库so更新
  17. (4.6.14)android 插桩基本概念plugging or Swap
  18. android广告轮播无限
  19. 团队对员工工作积极性的影响
  20. 微信小程序 跳转公众号

热门文章

  1. L1-087 机工士姆斯塔迪奥 和 L1-048 矩阵A乘以B
  2. centos oracle 修改监听服务名_虚拟机(Oracle Virtual Box)下ORACLE的安装
  3. META是什么意思?
  4. P5208-[WC2019] I 君的商店【交互,二分】
  5. 从IP138上获取数据,查询多个IP的归宿地
  6. 阿里云个人网站备案流程
  7. C# 脚本化实现方式探究
  8. 392高校毕业设计选题
  9. 基因表达相关性——笔记
  10. Delphi XE10让android的界面设计摆脱繁杂