background-position 50% 50%是如何计算的

【background-position 50% 50%是如何计算的】的更多相关文章

background-position 50% 50%是如何计算的

background-position:value1 value2 value1和value2的值可以值绝对值也可以是百分数,大部分值都很好理解,但是50% 50%这两个值是如何计算的呢? 图片水平和垂直居中.与 background-position:center center;效果等同. 等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏.等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏. 例如: .contain…

transform:translate(-50%,-50%)实现水平垂直居中

.content { padding:10px; background:green; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50…

.使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css淘宝测试练习题</title> <style type="text/css"> *{margin: 0;padding: 0;font-size:…

transform: translate(-50%, -50%) 实现块元素百分比下居中

<!doctype html> <html> <head> <meta charset="utf-8"> <title>position & transform: translate(-50%, -50%) 实现块元素百分比下居中</title> <style> html,body { width: 100%; height: 100%; position: relative; } .box {…

绘制一个绿色矩形平面((50, 50)->(350, 350))

//VS2008+opencv2.4 //绘制一个绿色矩形平面 #include "stdafx.h" #include "highgui.h" #include "cv.h" int _tmain(int argc, _TCHAR* argv[]) { cvNamedWindow("ShowImage", CV_WINDOW_AUTOSIZE); //创建矩阵并置零 IplImage* image= cvCreateImag…

background image position问题

在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 注意,第一个表示水平,不是top,第二个是left. 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图,规定的位置是"…

css背景图片位置：background的position

position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/表示背景图片在指定div的位置,从左上角开始 2.background:url(../image/header.jpg) no-repeat right bottom; /*相当于100% 100%*/表示背景图片从指定div的右下角开…

水平居中和transform: translateY(-50%) 实现元素垂直居中效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style> * { margin: 0; padding: 0; } .center { width: 960px; height: 500px; margin: 0 auto; background: #1879D…

css背景图片位置：background的position（转）

css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/表示背景图片在指定div的位置,从左上角开始 2.background:url(../image/header.jpg) no-repeat right bottom; /*相…

background，position，绝对定位中位置属性的定位规则，cursor

backgorund背景 background-color:red; 背景颜色 background-image:url(路径);背景图片 background-repeat:no-repeat;不重复 background-repeat:repeat-x/y;x轴上重复 background-position:right bottom;右下角 [top center] 上边中间 background-position:50% 50%; [20px 70px;] background:red u…