CSS3 背景起始位置 background-origin属性
默认情况下,背景图像从元素的 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 所示:
图4-34 background-origin属性效果
从上图可以看到,background-origin 属性只能控制背景图像的表现,不能控制背景色的表现,背景色始终是从元素的边框开始显示。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
CSS3 背景起始位置 background-origin属性相关推荐
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- html div背景图片路径,css如何设置背景图片位置?
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?下面我们来看一下css设置背景图片位置的方法. 在背景图片的背景图片位置属性中,background-posi ...
- background复合属性顺序_background:常用背景属性(复合属性)
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...
- css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴 重复展示(纵 ...
- 背景(background)属性
background(背景属性) background-attachment:背景图像是否固定或者随着页面的其余部分滚动 scroll:背景图片随着页面的其余部分滚动 fixed:背景图片是固定的 i ...
- .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- css如何设置背景图片?background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- Background 全属性实例图解(10种全)(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
最新文章
- python搭建numpy_python开发环境搭建及numpy基本属性-【老鱼学numpy】
- Ubuntu init启动流程分析浅析
- 沙雕同事一来公司就把高并发的程序搞崩了,我心态也蹦了!
- c# string总结
- Basic认证方式访问url
- 如何在64位WIN7下安装64位的解压版mysql-5.6.37-winx64.zip
- Linux的实际操作:文件目录类的实用指令(echo head tail)
- 多个div在一个div中一行水平显示
- java 压缩包添加文件,如何在Java中向现有zip文件添加条目?
- 1019 数字黑洞 (20)
- 【优化算法】模拟退火算法简介
- 程序算法面试 题目汇总 算法题 推理题 规律题
- 架构师的主要职责是什么?
- GAMIT数据的下载与准备
- 计算机应用 2010 成绩,2010西电计算机应用技术考研成绩
- win7 修改html文件图标,如何更改文件图标,教您Win7如何更改图标
- python画雷达图-python 雷达图
- golang 升级到新版本_golang升级
- sku排列算法实现商品规格属性组合
- linux 硬盘、RAID相关命令详解