CSS常见样式(一):background_html/css_WEB-ITnose

  • A+
所属分类:html教程
摘要

CSS常见样式(一):background

跟着视频将 HTML 和 CSS (不包括 HTML5 和 CSS3)全部粗略学习了一遍之后,感觉有必要再系统性地进行一下复习和总结。第一篇文章将会以一个小 demo 来总结一下 background 的用法。

Demo: Button

demo如下(涉及到本地图片,因此预览效果有问题):
https://jsfiddle.net/ChasonZhang/185mmr99/
效果如下:

按钮来源(亚马逊(Amazon)的按钮样式):

看了上面按钮样式之后,我想到的解决方案有如下几种:

  • 最简单:直接使用不带文字的图片作为按钮的背景样式,缺点在于针对不同的按钮宽度(如上图登录按钮和购买按钮)需要设计师进行重复的绘制,增加了额外的工作量,且缺乏重用性。

  • 最完美:使用CSS进行绘制: linear-gradient 和 border-radius ,缺乏在于部分低版本IE(具体哪个版本待查证,印象中是 IE8 及以下)不兼容 border-radius。

  • 最兼容:将使用图片和CSS绘制结合在一起。

  • background 属性在第3种方法中得到了充分的利用。

    background

    下图是 w3c 上关于 background 的属性清单:

    经过简单的试验,可以得出以下几条结论:

  • 背景图片默认以原尺寸填充,填充范围包括盒模型的 padding 和 content 区域;

  • 背景图片默认以左上角为原始位置(0, 0),默认按照从左到右、从上到下的顺序**重复填充**,直到填充满整个填充范围;

  • background-image 可以设置 background-size (CSS3) 的值, background-color 不可以;感兴趣的话另外两个 CSS3 新属性也可以研究一下,不过兼容性都需要 IE9 及以上。

  • 缩写形式: background: color image position/size repeat origin clip attachment initial|inherit; ,注意 / 的使用;

  • background 也有层级关系。

  • blackground 不影响盒模型的宽高,不属于盒模型的内容(content)。之前的浮动与清浮动系列文章里提到过,块元素占满整行,高度由内容撑开。也就是说,在 div 里输入几行文字,div 就有多高;但是如果 div 为空(除了背景图没有其他文字等内容),那么背景图就不会显出来。作为初学者曾经跳进过的坑,这一点还是要注意的,插入纯背景图需要对块级元素设置宽高。但是,如果在 div 中插入 img 元素,那这就完全不是一回事,虽然渲染效果可能一模一样。

  • 以上几点,是对 background 基本知识的总结,作为初学者,我以为掌握到这种程度基本上算合格了。

    样式说明:Styling

    样式代码如下:

    整个样式的思路是:

  • 将按钮分为两部分:文字+背景。文字属于 html 里的内容,css主要设计的是样式。

  • 将背景拆分为三部分,竖直着切三刀,左右分别是带两个圆角的小矩形,中间是一段横长的矩形。

  • 将中间部分继续竖起切,切成一条条1像素宽的矩形,然后需要多宽的矩形,就用多少条1px矩形。打个简单的比方,就是先微分,再积分。

  • 在这个例子中,使用 background 属性时,需要注意给所有块级元素设置宽,宽只需要 .btn 设置一次就可以。

    布局说明:Coding

    代码如下,基本的三层嵌套布局。

         
       
       
        加入购物车
        
          
     

    知其所以然
    在构造这个布局的时候,有一个问题需要明白:
    为什么 .btnR 需要放在 .btnL 里面?
    .btnL 放在 .btn 里面可以理解,但是 .btnL 和 .btnR 不是并列关系吗?假设 .btnR 不放在 .btnL 里面,而是与之并列,会出现按钮背景两边圆角部分错位排列的效果,原因在于两个块级元素都有宽高,会分别占据一行。

    小结

    随着 CSS3 的发展,如今这个小 demo 并不是解决类似样式的最佳方式了,但是里面蕴含着 **CSS 滑动门**的原理(前几年非常流行的一种方法,参考传智播客的导航栏)。当然了,在这里以这个小 demo 为例,主要是为了总结一下 background 的用法。

    weinxin
    欢迎加入中国站长博客之家
    本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: