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 ...
随机推荐
- ExtJS 4.2.1学习笔记(一)——MVC架构与布局
1 ExtJS入门 1.1 支持所有主流浏览器 调试推荐:chrome.Safari.Firefox 1.2 推荐目录结构 - appname (包含所有程序代码,是根目录 ...
- 使用octave符号运算求解不定积分、微分方程等(兼容matlab)
1.求解1/(1+cos(x))^2的不定积分. 在和学生讨论一道物理竞赛题的时候,出现了这个函数的积分求解需求.查积分表也可写出答案.但是可以使用octave的符号运算工具箱来做. syms x; ...
- 分布式中为什么要加入redis缓存的理解
面我们介绍了mybatis自带的二级缓存,但是这个缓存是单服务器工作,无法实现分布式缓存.那么什么是分布式缓存呢?假设现在有两个服务器1和2,用户访问的时候访问了1服务器,查询后的缓存就会放在1服务器 ...
- apache的URL重写
apache的url重写 第一步:修改apache\conf目录下的的httpd.conf文件 1.加载apache的url重写模块 大概122行:LoadModule rewrite_module ...
- zTree学习笔记
一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...
- hexo 博客
梦飞扬~ 个人网站:Mauger`s Blog 博客园 标签 新随笔 随笔 管理 Github 随笔 - 61 文章 - 1 评论 - 0 使用Node.js+Hexo+Github搭建个人博客 ...
- clustalX2使用以及相关的问题
Clustalx的操作 第一步:输入序列文件. 第二步:设定比对的一些参数. 参数设定窗口. 第三步:开始序列比对. 第四步:比对完成,选择保存结果文件的格式 相关问题 CLUSTALX-是CLUST ...
- O(1)乘法与快速乘O(log)
//O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){ x=x%MOD,y=y%MOD; return ((x*y-(LL)(((long double)x* ...
- vue的props和$emit / 父子组件通信
props 父级: 父级组件中引用子组件,并将自己data下面的giveChild数据绑定在 giveChildData 传给子 <myChild :giveChildData=" ...
- 更改npm默认路径
Windows下的Nodejs npm路径是appdata,如果你想通过npm在自己指定的路径下去搭建环境,那么就要去nodejs的安装目录中找到node_modules\npm\npmrc文件,修改 ...