CSS常见样式(一):background

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

Demo: Button

demo如下(涉及到本地图片,因此预览效果有问题):
https://jsfiddle.net/ChasonZhang/185mmr99/
效果如下:
《CSS常见样式(一):background》

按钮来源(亚马逊(Amazon)的按钮样式):
《CSS常见样式(一):background》
《CSS常见样式(一):background》

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

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

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

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

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

background

下图是 w3c 上关于 background 的属性清单:
《CSS常见样式(一):background》

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

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

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

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

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

  5. background 也有层级关系。

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

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

样式说明:Styling

样式代码如下:

<style type="text/css">
body { margin: 0;}
.btn { margin: 20px auto; width: 135px; height: 31px;
    background-image: url(img/btn.jpg);
    background-repeat: repeat-x;
}
.btnL {
    height: 31px;
    background-image: url(img/btnL.jpg);
    background-repeat: no-repeat;
}
.btnR {
    height: 31px;
    background-image: url(img/btnR.jpg);
    background-repeat: no-repeat;
    background-position: right;
    line-height: 31px;
    text-align: center;
    font-size: 14px;
}
</style>

整个样式的思路是:

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

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

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

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

布局说明:Coding

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

<body>
<div class="btn">
    <div class="btnL">
        <div class="btnR">加入购物车</div>
    </div>    
</div>
</body>

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

小结

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

    原文作者:ChasonZhang
    原文地址: https://segmentfault.com/a/1190000003159607
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞