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之背景的填充范围的更多相关文章

  1. 【css】背景图片填充

    background: url(../img/icon_img/blue_gou.png) 0 0 no-repeat; background-size: cover; border-color: # ...

  2. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  3. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. CSS 设置背景透明度,不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  7. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  8. CSS实现背景透明,文字不透明(各浏览器兼容)

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  9. CSS实现背景透明,文字不透明(各浏览器兼容) (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

随机推荐

  1. 【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 文章声明 此文章部分资料和代码整合自网上,来源太多已经无法查明出处,如侵犯您的权利,请联系我删除. 01 什么是旅行商问题(TS ...

  2. 解决vs code中golang插件依赖安装失败问题

    解决vs code中golang插件依赖安装失败问题 Installing github.com/nsf/gocode SUCCEEDED Installing github.com/uudashr/ ...

  3. Difference **面向过程(或者叫结构化)分析方法**面向对象分析方法

    面向过程和面向对象的区别 面向过程是分析出解决问题所需要的步骤,然后一步步实现,面向对象是把构成问事件分解成各个对象,建立对象的目的是为了描述某个事物在整个解决问题的步骤中的行为. 可以说面向对象是从 ...

  4. ThinkCMF Volist标签

    volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行输出. 在控制器中首先对模版赋值: $User = ...

  5. 训练DCGAN(pytorch官网版本)

    将pytorch官网的python代码当下来,然后下载好celeba数据集(百度网盘),在代码旁新建celeba文件夹,将解压后的img_align_celeba文件夹放进去,就可以运行代码了. 输出 ...

  6. python之控制流习题+代码

    # !/usr/bin/python3 # -*- coding: utf-8 -*- # @Time :2018/11/26 15:32 # @Author :yosef # @Email :wur ...

  7. html的第一个程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. fread 快速读入 (神奇挂!)

    注意这里是将后台的所有数据都读入在计算 #include<bits/stdc++.h> using namespace std; #define ll long long namespac ...

  9. es6 封装一个登录注册的验证滑块

    1,需求分析 滑块从左滑到右,开始滑.结束滑两种状态.两种状态显示的内容和样式的不同. 这是淘宝注册验证滑块的示例图 2,代码分析 const render = Symbol('render') co ...

  10. PIE SDK克里金插值法

    1.算法功能简介 克里金插值法基于一般最小二乘法的随机插值技术没用方差图作为权重函数,被应用于任何点数据估计其在地表上分布的现象,被称为空间自协方差最佳插值法,是一种最优内插法也是一种最常用的空间插值 ...