背景位置——混合单位

1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标

代码1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景位置——精确单位</title><style>div{width:  300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* X一定为20  Y一定是center  等价于background-position: 20px */background-position: 20px center;}</style>
</head><body><div></div>
</body></html>

运行效果：

代码2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景位置——精确单位</title><style>div{width:  300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* 水平是居中对齐，垂直是20 */background-position:  center  20px;}</style>
</head><body><div></div>
</body></html>

运行效果：

代码3：水平居中对齐，垂直距离顶部40

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超大背景图片</title><style>body{background-image: url(images/bg.jpg);/* 背景不重复 */background-repeat: no-repeat;/* 水平居中，垂直靠上 */background-position: center 40px ;}</style>
</head><body></body></html>

运行效果：

背景位置——混合单位相关推荐

背景位置——精确单位
1.参数是精确单位: 如果参数值是精确坐标,那么第一个肯定是X坐标,第二个一定是Y坐标代码: <!DOCTYPE html> <html lang="en"&g ...
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...
CSS背景颜色设置背景附着背景平铺背景位置背景简写背景透明
CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: backgr ...
【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
文章目录一.背景位置 1.语法说明 2.注意事项二.背景位置-方位值设置 1.效果展示 2.完整代码示例一.背景位置 1.语法说明如果盒子的大小大于背景图片的大小 , 默认的图片位置 ...
opencv背景建模(混合高斯模型)
背景建模帧差法由于场景中的目标在运动,目标的影像在不同图像帧中的位置不同.该类算法对时间上连续的两帧图像进行差分运算,不同帧对应的像素点相减,判断灰度差的绝对值,当绝对值超过一定阈值时,即可判断为 ...
python opencv 背景建模混合高斯模型
本文转载自别人博客混合高斯模型:在进行前景检测前,先对背景进行训练,对图像中每个背景采用一个混合高斯模型进行模拟,每个背景的混合高斯的个数可以自适应.然后在测试阶段,对新来的像素进行GMM匹配,如果 ...
背景位置 background-position 0916
背景位置 background-position 0916 语法备注详情见下篇的解析
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

背景位置——混合单位

背景位置——混合单位相关推荐

最新文章

热门文章