符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章给大家分享的是有关Css中background怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的达拉特网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1. background-color
所有元素都能设置背景颜色。
background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。
2. background-image
所有元素都能设置背景图像;
背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。
3. background-repeat
repeat(默认)/no-repeat/repeat-x/ repeat-y
4. background-attachment
scroll(默认)/fixed
5. background-position
像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。
百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。
关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。
注意:background-position可以为负值。
在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。
6. background-size
设置背景图像的尺寸;默认值为auto。
像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。
百分比法:以父元素的宽度和高度以基准来计算。
关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。
关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。
7. background-origin
定义背景图像的初始位置
border-box,边框左上角。
padding-box,padding区域左上角;默认值。
content-box,内容区左上角。
8. background-clip
The CSS3 background-clip property specifies the painting area of the background.
The property takes three different values:
border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box
(英文的解释得比较清楚)
(英文都是从W3Schools Online搬运)
关于background-origin和background-clip,它们是相互独立的,互不干扰。
关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:
background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。
感谢各位的阅读!关于“Css中background怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!