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 ...
随机推荐
- FJWC2019 子图 (三元环计数、四元环计数)
给定 n 个点和 m 条边的一张图和一个值 k ,求图中边数为 k 的联通子图个数 mod 1e9+7. \(n \le 10^5, m \le 2 \times 10^5, 1 \le k \le ...
- 并查集简述 (HDU-1213-How Many Tables)
并查集主要解决集合的有关运算,主要操作是查找操作和并操作. 1.集合的储存方式. 为便于查找,集合通常以树结构储存,每个元素分 数据域和指针域,可以用链式储存,也可以用结构数组储存,用根节点来表示一个 ...
- angluarJs与后台交互小案例
.myService.html: <!DOCTYPE HTML> <html ng-app="app"> <head> <title> ...
- JAVA之I/O 输入输出流详解
简 介 如何在Java中进行文件的读写,Java IO流是必备的知识.这篇博文主要为您带来Java中的输入输出流的内容,包括文件编码.使用File类对文件和目录进行管理.字节流和字符流的基本操作 ...
- POJ3322 Bloxorz I 无脑广搜(我死了。。。)
多测不清空,爆零两行泪....我死了QWQ 每个节点3个状态:横坐标,纵坐标,和方向 说一下方向:0:立着,1:竖着躺着,上半部分在(x,y),2:横着躺着,左半部分在(x,y) 然后就有了常量数组: ...
- codeforces1097D Makoto and a Blackboard 数学+期望dp
题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp 好题好题!! ...
- POJ - 2248 迭代加深
枚举ak的值 反向枚举使ak尽快到达最短链的n /*H E A D*/ int n,m,a[23333],dep; bool dfs(int x){ if(a[x-1]>n||a[x-1]< ...
- srping 事物管理
1. 准备工作 1> 添加接口 BookShopDao package com.tx; public interface BookShopDao { //根据书号获取书的单价 public in ...
- B/S和C/S架构简单理解
B/S和C/S架构简单理解 B/S结构.C/S结构 B(browser浏览器)-S(server服务器),说简单点就是通过浏览器来请求服务器,实现数据交互.那自然了,C(client客户端软件)-S( ...
- 让android系统中任意一个view变成进度条
1.效果 2.进度条背景drawable文件 结束后可以恢复原背景. <?xml version="1.0" encoding="utf-8"?> ...