快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

CSS3中有哪些新增的背景属性

本篇文章为大家展示了CSS3中有哪些新增的背景属性，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

10余年专注成都网站制作，成都定制网页设计，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网页设计,高端网页制作,对成都混凝土搅拌罐车等多个领域，拥有丰富的网站建设经验。

CSS3新增属性：background-clip ，background-origin ， background-size

1.background-clip

背景的剪裁属性，是从指定位置开始绘制。

**

**

2.background-origin

background-Origin属性指定了背景图像的位置区域。

** 上面两个的属性值都是border-box， padding-box ， content-box（这里建议要对盒子模型有足够了解，那么在这里就看这3个属性值就一清二楚了），或者看下图：

CSS3中有哪些新增的背景属性

background-clip就是相当于再这3个位置的哪个地方开始裁剪，来达到其相应的效果，看代码




  
  Title
  




没有背景剪裁 (border-box没有定义):


  
Lorem Ipsum Dolor

  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: padding-box:

  

Lorem Ipsum Dolor

  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: content-box:

  

Lorem Ipsum Dolor

  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

效果图：

CSS3中有哪些新增的背景属性 CSS3中有哪些新增的背景属性

而background-origin则是再那个区域显示背景，看代码




  
  Title
  



背景图像边界框的相对位置


  
Lorem Ipsum Dolor

  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.



背景图像的相对位置的内容框


  
Lorem Ipsum Dolor

  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

效果：

CSS3中有哪些新增的背景属性

**

3.background-size

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中background-size让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

其属性值：

①.length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

②.lpercentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

③.cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

④.contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

上述内容就是CSS3中有哪些新增的背景属性，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


文章标题：CSS3中有哪些新增的背景属性
URL网址：http://6mz.cn/article/jsjici.html

其他资讯