揭秘CSS(第 1 版)
4.5.7 背景起始位置
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景尺寸

背景附着

背景位置

背景重复

背景图像

背景颜色

背景起始位置

默认情况下,背景图像从元素的 padding 区域的左上角开始显示。然而,有时候却希望背景图像从边框的左上角、或内容区的左上角开始显示。

这时,就可以通过 background-origin属性来设置背景图像的起始显示位置,可选值有 border-box | padding-box | content-box,默认值为 padding-box。

border-box 表示背景图像从 border 区域的左上角开始显示,当为边框设置透明度后,背景图像和边框相叠加,透过边框可以看见背景图像。padding-box 表示背景图像从 padding区域的左上角开始显示。content-box 表示背景图像从 content区域的左上角开始显示。当内边距为0时,padding-box 与 content-box 的效果相同。

这里对每个取值定义了一个类,然后分别应用到一个容器,来看看 background-origin属性在不同取值下的表现。代码如下:

div  {
    width: 120px;
    height: 90px;
    padding: 20px;
    border: 10px dashed #888;
    background-color: yellow;
    background-repeat: no-repeat;
    background-image: url(img/bg.gif);
}
.border-box {
    background-origin: border-box;
}
.padding-box {
    background-origin: padding-box;
}
.content-box {
    background-origin: content-box;
}
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

这里把边框设置为很粗的虚线,并把背景色设置为黄色,以便能够清楚看到背景色或背景图像延伸到边框下的情况。上述代码的运行结果如图 4‑34 所示:

background-origin属性效果
图4-34 background-origin属性效果

从上图可以看到,background-origin 属性只能控制背景图像的表现,不能控制背景色的表现,背景色始终是从元素的边框开始显示。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验