关注前端开发
关注用户体验

CSS3详解:background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。

1、多个背景图片

在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、新属性:Background Clip

此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下:
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示,而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示,而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值,类似与background-clip: border;

3、新属性: Background Origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
(1)background-origin:border;
从border边框位置算起
(2)background-origin:padding;
从padding位置算起
(3)background-origin:content;
从content-box内容区域位置算起;

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性:Background  Size

Background Size属性用来重设你的背景图片。有几个属性值:
(1)background-size: contain;
缩小背景图片使其适应标签元素(主要是像素方面的比率)
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小,来缩放图片的尺寸大小

你可以去CSS 3 specifications站点看一下简单的案例说明。

5、新属性:Background Break

css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
属性值:

(1)Background-break: continuous;
此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
space:图片以相同的间距平铺且填充整个标签元素
round:图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。

赞(2)
未经允许不得转载:大前端 » CSS3详解:background
分享到: 更多 (0)

评论 39

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #31

    produce,Document represented too much time for too long to say I do have sick, how could you nevertheless hardly understand? I personally jot far too much too much We now have written and published depleted, you continue to don’t get precisely how

    Hong Strejan1周前 (05-14)回复
  2. #30

    Have you ever thought about writing an ebook or guest authoring on other websites? I have a blog based on the same information you discuss and would love to have you share some stories/information. I know my visitors would appreciate your work. If you are even remotely interested, feel free to shoot me an e-mail.

    Nonton Anime2周前 (05-11)回复
  3. #29

    I’ve recently been wondering about the very same point myself recently. Happy to see someone on the same wavelength! Nice article.

    cat2周前 (05-08)回复
  4. #28

    Good site you have got here.. It’s difficult to find quality writing like yours these days. I truly appreciate people like you! Take care!!

    DMC52周前 (05-07)回复
  5. #27

    we always buy our dog supplies at least once a week from the local pet store. –

    pokeronline3周前 (05-03)回复
  6. #26

    Good blog you’ve got here.. It’s difficult to find high-quality writing like yours these days. I seriously appreciate individuals like you! Take care!!

  7. #25

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    huidspecialist1个月前 (04-18)回复
  8. #24

    Enjoyed the post.

    Huidinstituut1个月前 (04-16)回复
  9. #23

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Rocasea1个月前 (04-16)回复
  10. #22

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    schoonheidsspecialist1个月前 (04-16)回复
  11. #21

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    floaten1个月前 (04-16)回复
  12. #20

    Keep up the good work! Thanks.

  13. #19

    Keep up the good work! Thanks.

    Huidverbetering1个月前 (04-15)回复
  14. #18

    bookmarked!!, I like your web site!

    Apex Legends1个月前 (04-12)回复
  15. #17

    Keep up the good work! Thanks.

    administratie breda1个月前 (04-10)回复
  16. #16

    You made some decent points there. I checked on the internet for more info about the issue and found most individuals will go along with your views on this web site.

    DMC51个月前 (04-10)回复
  17. #15

    Words cannot express how much I loved Game of Thrones. The wait until next year will be painful (however, the new book should help).|dandirks|

    my singing monsters2个月前 (03-28)回复
  18. #14

    Hello there! Do you know if they make any plugins to protect against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?

    Floria Tullar2个月前 (03-11)回复
  19. #13

    henbang

    insight4年前 (2015-04-17)回复
  20. #12

    菜鸟提问~是在style.css最下面添加这一行就行了吗?background-image: url(123.jpg)

    悠悠5年前 (2014-09-09)回复
  21. #11

    好吧,今天又来看了下….

    格桑8年前 (2011-12-02)回复
  22. #10

    I enjoy your piece of work, thanks for all the good blog posts.

    resim upload8年前 (2011-04-23)回复
  23. #9

    😐 网页设计师么???

  24. #8

    最近也在认真的学习啊

    coach outlet bags8年前 (2011-04-06)回复
  25. #7

    越来越强大了。

    asics walking shoes8年前 (2011-03-30)回复
  26. #6

    background还有这么多属性,果断学习了,看来我学的很差啊

    无冷8年前 (2011-03-22)回复
  27. #5

    全是技术贴

    asics outlet8年前 (2011-03-16)回复
  28. #4

    最近有点忙,学习css3又落下了。看来还得转篇浩哥的文章 去博客充充数了…. :mrgreen:

    格桑8年前 (2011-03-15)回复
    • 🙁 学习新知识的步子不能慢啊!!

      浩子8年前 (2011-03-16)回复
  29. #3

    越来越强大了。

    John8年前 (2011-03-15)回复
  30. #2

    学习了,这个离实际用到应该还很遥远!

    way8年前 (2011-03-15)回复
  31. #1

    果断表示对于新属性进行了一番认真的学习,收获甚夥,o(∩_∩)o 哈哈~

    罗伊8年前 (2011-03-15)回复
    • Lovely site! I am loving it!! Will be back later to read some more. I am taking your feeds also

      Sidney Carbine2个月前 (03-11)回复
    • The crucial point to recognize is this fact applies not just in , but additionally to.

      my singing monsters2个月前 (03-28)回复
    • i think it is expensive to get a hair transplant but the procedure is well worth it**

      Waylon Ferraiolo1个月前 (04-08)回复
    • Beneficial story! I must say i relished their digesting. I hope to view greater of your stuff. It is my opinion you have got remarkable information along with visualization. What i am remarkably encouraged using resources.

      situs poker2周前 (05-05)回复
    • Very interesting subject , regards for putting up.

      cat tales2周前 (05-08)回复
    • produce,Whitened froth, rather same interest to find area, mild white over a chin, there’s magnificence that the rhythm, and then make a shout might be kinda hot.

      Nonton Anime2周前 (05-11)回复

themebetter 国内更好的WordPress主题服务商

立即前往