html背景和框如何居中显示图片,巧用background属性实现图片居中
想必大家都常被页面居中这个问题困扰吧,这里简单分享一下一个使用background样式属性来实现图片居中的新用法。
很久以前本骚年常用image.onload()这样的方式获取图片大小再进行调整,得到图片原比例居中的效果,自从发现这个新用法,就跟长长的js代码说拜拜了。
background
background简介
background是CSS简写属性,用来集中设置各种背景属性。
background可以用来设置一个或多个属性:
background-color, background-image,
background-position, background-repeat,
background-size, background-attachment,
等等。
具体大家可以上background | MDN上查看,里面有每个值的默认值、支持值、以及浏览器的兼容性等等,这里先对成员简单做些介绍。
background-color
CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。
background-image
CSS background-image属性用于为一个元素设置一个或者多个背景图像。
图像在绘制时,以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。
绘制层次关系如下:
元素的borders会在background-image之上被绘制
background-color会在background-image之下绘制
图像的绘制与盒子以及盒子的边框的关系,需要在CSS属性{cssxref(“background-clip”)}}和background-origin中定义,后面我们会讲到。
巧妙使用background-image除了可以拼接多图片,还可以结合渐变linear-gradient、透明度rgba()、重复方式background-repeat做出很棒的效果,具体可以参考使用CSS渐变 | MDN,效果图如下:
甚至是:
background-repeat
background-repeat CSS属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
background-attachment
如果指定了background-image,那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。
background-position
background-position指定背景图片的初始位置。
对于每一个被设定的背景图片来说,background-position这个CSS属性设置了一个初始位置。 这个初始位置是相对于以background-origin定义的背景位置图层(padding-box|border-box|content-box)来说的,后面有讲。
关于该属性的取值,当然常用的center之外,像left|bottom|…等等,以及百分比percentage、甚至具体的值px等都是可以支持的。该属性比较简单常见,具体大家可以去background-position | MDN上查看。
background-clip
background-clip设置元素的背景(背景图片或颜色)是否延伸到边框下面
‘border-box’: 背景延伸到边框外沿(但是在边框之下)
‘padding-box’: 边框下面没有背景,即背景延伸到内边距外沿
‘content-box’: 背景裁剪到内容区(content-box)外沿
background-origin
background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域
‘border-box’: 背景将会延伸到延伸到外边界的边框,而且是「边框在上、背景在下」
‘padding-box’: 背景描绘在padding盒子,边框里不会有背景出现。同样,背景将会延伸到最外边界的padding
‘content-box’: 背景描绘在内容区范围
background-clip与background-origin
这是两个很相似的CSS属性,前面也提到了几遍了,主要是用来设置背景与border/padding等关系的。
乍一看两者怎么都长一样,但是有个关键性的区别是:background-clip对多余内容进行裁剪,而background-origin则会调整位置保证效果。
background-size
background-size设置背景图片大小。
这个看起来很不起眼的属性,其实正是后面我们进行图片居中的关键。
除了基本的length值、percentage值,background-size还有几个很棒的值:
auto: 以背景图片的比例缩放背景图片。
cover: 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain: 缩放背景图片以完全装入背景区,可能背景区部分空白
背景区由前面提到的background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。
如果attachment为fixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。
下面简单分享一下图片居中的很棒的方法。
图片居中新用法
组合使用background
图片居中
经过上面简单的讲解每个属性的效果,我们可以得到以下的一个样式设置:
.img-contain{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
这样,不管
的宽高怎么设置,需要显示的图片都会按原比例自动缩放以全部刚好包含在
里面。
图片填充
如果需要背景图片按比例拉伸来占满
(不留白),我们可以调整background-size:
.img-cover{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}.
border和padding
如果有边框,我们可以配合background-clip或background-origin来使用,具体自行回放上面内容。
使用
我们可以这样使用:
聪明的你肯定发现了,这样的使用方法有个问题:
作为背景的图片是撑不起元素的,故这里我们需要给div手动添加宽高:
其实如果我们在页面内统一对每个模块(像这里的
)设置了宽高,这里的问题就不需要考虑的。
当然这样处理的话,有个比较不方便的地方就是,我们再也没办法右键下载和保存图片了。还有别忘了浏览器兼容,相信大家可以各种出招解决掉的。
代码实现
JS Bin
div{
width: 500px;
height: 300px;
border: solid 2px red;
background-color: white;
background-image: url('http://o905ne85q.bkt.clouddn.com/5df2bea83bbf3a90ca130c70.jpg')
}
.img-contain{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.img-cover{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
图片居中
图片填充
具体效果如下:
html背景和框如何居中显示图片,巧用background属性实现图片居中相关推荐
- android 按钮 图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示?...
图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完 ...
- android studio table居中代码_html table表格标签内容如何居中显示?表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
- html table表格标签内容如何居中显示?表格的align属性的用法介绍
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
- CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-colo ...
- java里怎么使字居中显示,JAVA怎样使Label中的文字居中对齐!
优质回答 回答者:Catsayer丷 请看API Label中静态变量 static int CENTER 指示标签文本应居中. static int LEFT 指示标签文本应左对齐. static ...
- css中background属性引入图片url()中地址
网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...
- linux用命令下载图片,巧用linux命令做图片下载器
在平时上网的时候,发现有些图片不错,想保存到本地,一个一个的保存确实够费劲的,如果把整个网页都保存了,有些又是自己不需要的,就算下载下来了,还得从上百个网页元素中去筛选,哪些是css文件,哪些是js文 ...
- 手机端扣扣浏览器图片居中_实现图片始终居中显示于浏览器窗口中心位置
盒模型 在敲代码之前,首先建立一个盒模型,这让写代码的时候变得思路清晰. 本案例中,所要实现的是图片居中显示,超出浏览器窗口部分的图片隐藏.因此,盒模型如图: 图片以浏览器窗口作为定位元素,居中显示. ...
- banner背景图的居中显示
在网页中插入banner图,也就是横幅广告图的时候,要求在不同分辨率的页面中,图片都必须居中显示. 一般情况下作插入图片的时候,第一反应就是用img标签,但插入图片的大小与电脑的分辨率不同的时候,就会 ...
最新文章
- 前序遍历与中序遍历确定后序遍历
- python 报错 Missing dependencies for SOCKS support 解决方法
- 爬虫好学吗python-爬虫Python入门好学吗?学什么?
- matlab撤销上一步命令_CAD快速入门技巧:CAD软件中撤销操作的方法汇总
- C语言指针和链表的体会
- 计算机公开课教学反思,语文公开课教学反思
- linux内核打开文件数,放开Linux内核对用户进程可打开文件数和TCP连接的限制
- Idea的一些调试技巧及设置todo
- 导出已安装的插件_明明flash插件已安装,但是网页依然不能正常显示的解决办法...
- Hessian的使用与介绍
- webStorm 修改 JavaScript 版本为 ES6
- git常用使用命令个人总结
- Raytrace学习的阶段性总结
- 对圆柱面的曲面积分_圆柱体的对面积的曲面积分
- java WinRM 远程连接 windows10 执行脚本
- ZCMU-1345: 国际象棋
- 2.0 Mesh Beacon帧格式
- Java语言编写简单分数计算器
- 再贴一个Fleaphp相关的
- Spring三大核心思想详解