html background缩放,background-size使用详解

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | | | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

复制代码

代码如下:

背景图片大小

.demo {

background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

width: 300px;

height: 140px;

border: 1px solid #999;

background-size:cover;

}

html background缩放,background-size使用详解相关推荐

CSS background（背景图片）详解
"在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可 ...
MATLAB从入门到精通系列之MATLAB维度获取size()函数详解
1.预备知识维度获取size()主要用获取矩阵维度,常用于获取一维向量的长度,二维矩阵的行.列维度,以及高维数组的维度,方便对矩阵进行相关运算. 打开MATLAB运行界面进行准备. 2.size() ...
textureview 缩放_TextureView实现视频播放详解
TextureView在4.0(API level 14)中引入.它可以将内容流直接投影到View中,可以用于实现Live preview等功能.和SurfaceView不同,它不会在WMS中单独创建 ...
3d变换基础：平移、旋转、缩放（仿射变换）详解——公式推导
文章目录平移.旋转.缩放平移旋转 1. 沿x轴旋转 2. 沿y轴或者z轴旋转缩放是时候整理一波3d变换相关的知识了.模型的变换可以认为是空间中一堆点的变换,三维空间中,(x,y,z)可以认为 ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
Linux logrotate 使用详解
Linux logrotate Logrotate 简介 logrotate 程序是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件,起到"转储"作用. ...
css样式之background详解（格子效果）
background用法详解: 1.background-color 属性设置元素的背景颜色可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
background家族详解
background家族详解 CSS2中background家族连写形式 background: background-color, background-image, background-repe ...
Background Matting详解
转自:https://zhuanlan.zhihu.com/p/148265115?from_voters_page=true https://www.aiuai.cn/aifarm1462.html ...

html background缩放,background-size使用详解

html background缩放,background-size使用详解相关推荐

最新文章

热门文章