CSS背景-background
2018-06-24 02:09:40来源:未知 阅读 ()
- 复合属性—background
如果同时设置了background-color和background-image时,背景颜色会被图片覆盖。
background-image: 用作背景的图片,background:url( );
如果将背景设置为图片,那么我们就要考虑以下几个属性了。
background-repeat:
repeat-x:横向平铺
repeat-y:纵向平铺
round:背景图像自动缩放直到适应且填充满整个容器。
space:背景图像以相同的间距平铺且填充满整个容器或某个方向。
repeat:背景图像在横向和纵向平铺,默认值。
no-repeat:不平铺
background-size:
具有两个参数,值既可以是px也可以是%或者是auto(默认)。若只有一个参数,则为宽度,高度等比例缩放,如果背景图片的尺寸超过容器,将会被裁切。若有两个参数,则为宽高。
cover:背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器,不过超出的部分将会被裁切。
contain:此属性值可以将背景图片等比例放大或者缩小。contain只要求某一个方位上将容器覆盖,比如纵向或者横向能够最小程度将容器覆盖。
background-position:确定背景图片的位置
background-position : length || position
length:<percentage> | <length>
position:left center|left top| ……
1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。该属性定位不受元素的 padding影响,例如,我们给容器元素增加padding值,只是影响了容器元素的高度和宽度,背景图片的左上角还是与容器元素的左上角对齐。
2、background-position:-10px -20px;
图片以容器左上角为参考向左偏移10px,向上偏移 20px,
3、background-position:50% 50%;
图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
x=(300-178)*50%=61px y=(300-108)*50%=96px
4、background-position:100% 100%;
图片处于容器元素的右下角,与 background-position:right bottom;效果等同。
background-attachment:定义用户滚动页面时背景图片会发生什么。
scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。
但是有一种情况例外:对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。
fixed:背景图相对于视口固定,就算元素有了滚动条,背景图也不随内容移动,好像背景图片被钉到了视窗上一样。
local:背景图相对于元素内容固定。
背景图片会随着页面其余部分的滚动而移动。但如果内容是可以滚动的元素(设置为overflow:scroll的元素),背景图会随元素内容的滚动而滚动,因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。
这就是关于background这个复合属性的一些基本知识啦~
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html常用标签
下一篇:Web前端体系的脉络结构
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash