background详解
来源:互联网 发布:ubuntu切换到root 编辑:程序博客网 时间:2024/05/29 15:07
background
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
可能的值
background-color
定义和用法
background-color 属性设置元素的背景颜色。
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。
可能的值
=====================================================================================================
background-position
定义和用法
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
可能的值
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
x% y%第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
xpos ypos第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。
=====================================================================================================
background-size
定义和用法
background-size 属性规定背景图像的尺寸。
语法
background-size: length|percentage|cover|contain;
设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
=====================================================================================================
background-repeat
定义和用法
background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
详细说明
background-repeat 属性定义了图像的平铺模式
从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。可能的值
=====================================================================================================
background-origin
定义和用法
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
语法
background-origin: padding-box|border-box|content-box;
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
background-clip
定义和用法
background-clip 属性规定背景的绘制区域。
语法
background-clip: border-box|padding-box|content-box;
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。
=====================================================================================================
background-attachment
定义和用法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
可能的值
background-image
定义和用法
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
详细说明
background-image 属性会在元素的背景中设置一个图像。
根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。
初始背景图像(原图像)根据 background-position 属性的值放置。
可能的值
本文为截取w3school内容,只做学习和参考使用。
- background详解
- background详解
- CSS-Background详解
- background-position详解
- CSS background属性详解
- 详解background-size
- CSS3详解:background
- background-image 详解
- CSS3 Background-size 详解
- CSS的background详解
- background-size属性详解
- css background详解
- background-position用法详解
- CSS3 Background-size 详解
- css3中的background的新特性background-origin,background-clip,background-size详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- 解决ie下部支持background-size:100%;属性的方法
- Linux中configure/makefile的用法实例(附代码)
- cocapods 更新第三方库遇到的问题
- Listview中div加载css出现混乱的解决办法
- 洛谷 P2246 SAC#1 - Hello World(升级版)
- background详解
- 牛顿迭代法求解
- Add Digits (数根 digital root)
- Java读取TXT文件的方法
- ionic2实现社会化分享Social Sharing
- HTML常用标签和CSS基本概述
- yii2 错误总结
- 内核模块编译-helloworld
- jquery开发框架遇到TAB页没有关闭按钮的处理办法。