文档章节

图片水平和垂直居中

an_code
 an_code
发布于 2016/12/07 19:29
字数 318
阅读 1
收藏 0

背景图片自适应屏幕

background:url(https://img.alicdn.com/imgextra/i3/85662775/TB2ydR9aV95V1Bjy0FgXXc2vFXa-85662775.jpg) no-repeat center 100%

 

 

background:url(../images/list01.png) no-repeat 0 center;

的意思是 图像地址 不重复 水平位置0 垂直位置居中

0 center 的意思就是 水平位置0 垂直位置居中
-4px -3px 的意思就是 水平位置-4px  垂直位置-3px 

这两个值和background-position 属性是一样的,即设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
默认值:0% 0%
可能的值
 top left
 top center
 top right
 center left
 center center
 center right
 bottom left
 bottom center
 bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)

 x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)

mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)
 
您可以混合使用 % 和 position 值。

© 著作权归作者所有

共有 人打赏支持
an_code
粉丝 0
博文 8
码字总数 1162
作品 0
杭州
程序员
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
DIV和Table的水平、垂直居中

一般图片的居中问题容易解决,我的解决方法是通过样式设置: background-image:url(path) //链接图片的路径 background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有:r...

freedonn
2014/11/10
0
0
CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000
2016/03/29
33
0
前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜
2017/11/28
0
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
0
3

没有更多内容

加载失败,请刷新页面

加载更多

马太效应

马太效应

yizhichao
3分钟前
0
0
69.for while循环 continue break exit

20.10 for循环 20.11/20.12 while循环 20.13 break跳出循环 20.14 continue结束本次循环 20.15 exit退出整个脚本 扩展 select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.10......

王鑫linux
12分钟前
0
0
完整的软件开发流程是怎样的

在it圈混迹了这么久,做过各种各样的工作。但是我确一直不知道一个软件从无到有到底是怎么开发的。于是就产生了强烈的好奇心:一个软件产品的结果为什么是这样?为什么开发的速度不能再快一点...

TreasureWe
18分钟前
0
0
深度学习与图像处理之:人像背景虚化

简单实现思路: 对图像内容进行分割,提取人像 对图像背景进行模糊化处理 将人像和背景重新合成 在这里,使用DeepLabV3模型对图像内容进行分割并提取人像,实现的代码如下: import numpy a...

IOTService
21分钟前
0
0
20180918上课截图

小丑鱼00
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部