CSS背景属性
CSS背景属性
1、background-attachment 属性
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
inherit:规定应该从父元素继承 background-attachment 属性的设置。
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
2、background-clip 属性
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。
div
{
background-color:yellow;
background-clip:content-box;
}
3、background-origin 属性
border-box:背景图像相对于边框盒来定位。
padding-box:背景图像相对于内边距框来定位。
content-box:背景图像相对于内容框来定位。
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
4、background-size 属性
length
设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
例子1:
width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: border-box;
background-origin: border-box;
background-size: 100%;
如图:
例子2:
width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: padding-box;
background-origin: content-box;
background-size: 100%;
如图:
如果 background-attachment 设置了 fixed 属性,则设置 background-origin 无效果。
CSS背景属性的更多相关文章
- 你不知道的CSS背景—css背景属性全解
CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS 背景属性
background: 简写属性,作用是将背景属性置在一个声明中 background-attachment: 背景图像是否固定或者随着页面的其余部队滚动 background-color: 设置元素 ...
- CSS背景属性background
background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...
- [Web 前端] 011 css 背景属性
1. 概览 参数 释义 background-color 背景颜色 background-image 背景图片 background-repeat 是否重复 background-position 定 ...
- css背景属性整理
背景颜色 {background-color:red}/*常用十六进制颜色#fff*/ 图片 {background-image:url();} /*插入图片路径*/ 重复 {background-r ...
- css学习_css背景属性及其应用
css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- CSS的 背景属性
㈠背景色 background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...
随机推荐
- 【CSS】Beginner4:Text
1.alter the size and shape of the text 2.font-family:Arial, Verdana,"Times New Roman",helv ...
- Java笔记(二十五)……其他常用API
System类 工具类全部都是静态方法 常用方法 获取系统属性信息 static PropertiesgetProperties() static StringgetProperty(String k ...
- Tyvj P1729 文艺平衡树 Splay
题目: http://tyvj.cn/p/1729 P1729 文艺平衡树 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 此为平衡树系列第二道:文艺平衡树 ...
- Android 画直线并实现拖动
自定义View,在onDraw()方法中绘制一条直线,在onTouch()方法中监听手指的移动. public class AroundDragView extends View implements ...
- input输入框默认文字,点击消失
<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value='' ...
- 解决libcrypto.so.0.9.8: cannot open shared object file
文章解决的问题:安装nginx中需要libmysql.so.16包的支持,下面介绍如何安装,并建立lib的连接. 问题展示:error while loading shared libraries: ...
- IOS7 自定义UIBarButtonItem 的一些问题
ios 下自定义导航栏的BarButtonItem 会产生一些偏移问题, 解决方案: 通过新建一个系统的带固定距离的Item来调节你的Item #define IOS7_NAVI_SPACE ...
- editplus如何设置不自动备份
依次选择:工具,参数设置,文件(默认展开的,要缩回),然后看右边“保存文件时创建备份”,前面的框不要打勾,应用,确定
- DDD的好文章
http://www.jdon.com/44815 //cqrs 架构 http://www.jdon.com/tags/272 解道领域驱动专题
- 【Android】BroadCast广播机制应用与实例
如何编写广播接收器 第一步:需要继承BroadcastReceiver类,覆写其中的onReceive()方法. class MyBroadcastReceiver extends Broadcast ...