CSS之背景的填充范围
1.资料:CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景
2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的部分
3.CSS背景图片的填充范围和填充位置
3.1 如果不设置repeat属性的话,默认会图片重复的方式填充整个元素内容+padding部分(margin不包括)
3.2 如果设置了background-position的话,比如 top right(右上) 也就是img会顶到右上角的padding最边部

3.3 让背景图片居中,尽量用background-posintion:center,不要用百分比50% 50%
PS:这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
3.4 具体的调整背景图片的位置,可以用position配合 具体的数值单位,比如px这些 (方法是第一个参数为 右,第二个为下)
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
} 3.5 背景图片和scroll滑动框的自适应 background-attachment:fixed
CSS之背景的填充范围的更多相关文章
- 【css】背景图片填充
background: url(../img/icon_img/blue_gou.png) 0 0 no-repeat; background-size: cover; border-color: # ...
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS 设置背景透明度,不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- css 设置背景图片模糊,内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- CSS实现背景透明,文字不透明(各浏览器兼容) (转)
/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...
随机推荐
- Python里面的负号的各种神奇用法?来填坑啦
1.x.reshape(-1,2) x = np.linspace(1,10,10) x.reshape(-1,2) reshape(-1,2)里-1的应该是不管多少行,按两列算,行数自动算出.同理, ...
- Unity---高度解耦和
介绍 先举一个简单的例子: 在UGUI中新建一个Button和Text,要求实现点击Button改变Text中的文字. 我的第一反应就是在Button上添加一个脚本,获取点击事件来改变Text的内容. ...
- 3 hql语法及自定义函数(含array、map讲解) + hive的java api
本博文的主要内容如下: .hive的详细官方手册 .hive支持的数据类型 .Hive Shell .Hive工程所需依赖的jar包 .hive自定义函数 .分桶4 .附PPT hiv ...
- mysql的时区错误问题,The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one
在使用springboot整合ssm和druid的时候出现数据库一个问题 org.springframework.web.util.NestedServletException: Request pr ...
- Python之freshman04
一.迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的 ...
- Navicat 连接Sqlite数据库的方法和步骤
1.打开Navicat,进行如下操作. 2.在弹出的新建连接对话框中输入正确的信息,点击“确定”按钮. 3.可见如下
- git 各个区的区别
Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited) 把文件往Git版本库里添加的时候,是分两步执行的: 第一步是用 git add 把文 ...
- C++_基础2-复合数据类型
C语言使用术语“派生类型”,C++对类关系使用术语“派生”.所以就改用“复合类型”. 数组 数组是一种数据格式,能够存储多个同类型的值. 数组声明应指出以下三点: 存储在每个元素中的值的类型: 数组名 ...
- 24个常用 Python 实现
24个常用 Python 实现 1.冒泡排序 lis = [56,12,1,8,354,10,100,34,56,7,23,456,234,-58] def sortport(): for i in ...
- LeetCode6. Z字形变换
描述 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...