CSS之背景的填充范围

1.资料:CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景

2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的部分

3.CSS背景图片的填充范围和填充位置

3.1 如果不设置repeat属性的话,默认会图片重复的方式填充整个元素内容+padding部分(margin不包括)

3.2 如果设置了background-position的话,比如 top right(右上) 也就是img会顶到右上角的padding最边部

image

3.3 让背景图片居中,尽量用background-posintion:center,不要用百分比50% 50%

         **PS:这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。**

3.4 具体的调整背景图片的位置,可以用position配合 具体的数值单位,比如px这些 (方法是第一个参数为 右,第二个为下)

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

<pre>body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}

3.5 背景图片和scroll滑动框的自适应

  background-attachment:fixed
</pre>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、背景颜色-background-color 在CSS中,使用background-color属性来控制元素的背...
    故笙丶阅读 768评论 2 3
  • 背景颜色 如何设置标签的背景颜色?在CSS中有一个background-color:属性, 就是专门用来设置标签的...
    喝酸奶要舔盖__阅读 780评论 0 0
  • 我们在操作盒子div的时候 一般都会用到背景图片或者背景颜色等属性 1. background-image 背景...
    追逐_chase阅读 1,272评论 0 5
  • ===========本文共1500字================ CSS盒子模型---边框 内容区域 边框b...
    天边小狮阅读 1,296评论 0 0
  • 所有图都在body背景设置为green下的截图,请不要把最外层的绿色当成边框 半透明边框 如果我们想给一个容器设置...
    hcxowe阅读 3,988评论 0 6