CSS背景相关知识-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

CSS背景相关知识-创新互联

background背景
背景共分为以下8个属性
background-color:背景颜色
background-image:背景图片
background-repeat:背景图片重复
background-position:背景图片位置
background-size:背景图片尺寸
background-attachment:背景图片是否固定不动
background-clip:背景覆盖区
background-origin:背景图片覆盖区
其中常用的是
background-color,background-image,background-repeat,background-position
background-color:

在瑞昌等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计、成都网站制作 网站设计制作按需定制网站,公司网站建设,企业网站建设,高端网站设计,全网整合营销推广,成都外贸网站建设,瑞昌网站建设费用合理。

颜色名称,如:background-color:red(背景颜色是红色)

  • 十六进制背景色,如:background-color:#ff0000;/background-color:#f00;(#后面有三个字符说明每两个是相同的,也就是#f00相当于#ff0000)

  • rgb颜色,这里如果是rgba,a表示透明程度,0表示全透明,1表示完全不透明,如:background-color:rgba(255,0,0,0.5);

  • transparent,透明,如:background-color:transparent;

background-image:

  • url图片地址,可以多个图片,如:background-image:url(img/a.jpg),url(img/b.jpg)

  • none,不显示背景图像

background-image与background-color联合使用,保证在出现以下几种情况下,有背景色可以填充
(1)图片出不来(可能路径错,图片不存在)
(2)图片被误删除
(3)图片在不平铺的情况下覆盖不了整个盒子
background-repeat:

  • repeat:水平和垂直方向都重复图像,如:background-repeat:repeat;

  • repeat-x:水平方向重复图像

  • repeat-y:垂直方向重复图像

  • no-repeat:图像不重复

background-position:

  • 位置名字组合定位,只写一个默认另一个为居中,如:background-position:right bottom;/background-position:center;

  • 百分比位置,如:background-position:20% 20%;

  • 具体像素位置,如:background-position:20px 20px;

background-attachment:

  • scroll:背景图像相对于页面不动,会随着网页的滚动而移动,默认

  • fixed:背景图像相对于浏览器窗口不动,内容滚动的时候背景图像不动,如:background-attachment:fixed;

background-size:

  • 像素大小,只写一个默认另一个为auto,如:background-size:200px 100px;

  • 百分比大小,如:background-size:60% 60%;

  • cover:背景图像覆盖当前元素的所有背景区域,如:background-size:cover;

  • contain:图像显示大且刚好完全显示,一般不能覆盖全部背景区

background-clip:

  • border-box:背景覆盖到边框区域,如:background-clip:border-box;

  • padding-box:背景覆盖到padding区域

  • contect-box:背景只覆盖到content区域

background-origin:

  • border-box:背景图像的起始位置在边框处,如:background-origin:border-box;

  • padding-box:背景图像的起始位置从padding处开始

  • content-box:背景图像的起始位置从content处开始

该属性从ie9开始支持
background简写:(中间用空格隔开)
background:(background-color)(background-image)(background-repeat)(background-position)(background-size)
例:
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url('www.baidu.com/XXXX.jpg');可以加单引号也可以不加
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
可以简写为:
.box {
height: 400px;
background: #e8e8e8 url('www.baidu.com/XXXX.jpg') no-repeat center center/100px 100px;
}

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:CSS背景相关知识-创新互联
网页地址:http://kswsj.cn/article/jdsde.html

其他资讯