灵活的背景定位

实现效果:

将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。

background-position 方案

实现代码:

<div>海盗密码</div>
div {
/* 关键样式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px; /* 其它样式 */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}

实现要点:

  • background-position 允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字。本例就是设置背景图片离右边缘 20px,离底边 10px。
  • 为了兼容不支持 background-position 这种语法的浏览器,提供一个合适的回退方案,那就是使用 backgroundbottom right 来定位,虽然不能设置具体的偏移量。

background-origin 方案

实现代码:

<div>海盗密码</div>
div {
/* 关键样式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
padding: 10px 20px; /* 其它样式 */
max-width: 10em;
min-height: 5em;
color: white;
font: 100%/1 sans-serif;
}

实现要点:

  • background-origin 默认值是 padding-box,也就说我们设置 backgroundtop left 时左上角是 padding box(内边距的外沿框)的左上角。
  • 在本例中设置 background-origincontent-box,那么就相对于 content box(内容区的外沿框)的左上角,那么也就是背景图离容器的右边和底边的偏移量是跟着容器的 padding 值走了,那设置 padding: 10px 20px; 自然就可以实现本例的效果了。

calc() 方案

实现代码:

<div>海盗密码</div>
div {
/* 关键样式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px); /* 其它样式 */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}

实现要点:

  • 使用 calc 来动态计算使得背景图的左上角水平偏移 100% - 20px,垂直偏移 100% - 10px

条纹背景

水平条纹

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 通过 linear-gradient(#fb3 50%, #58a 0) 生成一个背景图,该背景图分为上下不同实色的两部分,占满容器大小。
  • 然后通过 background-size:100% 30px; 设置该背景图的宽高(宽为容器宽度,高为30px),由于默认情况下背景是重复平铺的,这样整个容器就铺满高为 30px 的双色水平条纹。

垂直条纹

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 通过 linear-gradient(to right, #fb3 50%, #58a 0) 生成一个背景图,该背景图分为左右不同实色的两部分(to right 改变渐变的方向,从上下该为左右),占满容器大小。
  • 然后通过 background-size:30px 100%; 设置该背景图的宽高(宽为 30px,高为容器高度),由于默认情况下背景是重复平铺的,这样整个容器就铺满宽为 30px 的双色水平垂直条纹。

斜向条纹

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 通过 linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0) 生成一个如下图的可重复铺设的背景图(重点是修改渐变方向为 45 度,四条条纹)。

  • 然后通过 background-size: 42.4px 42.4px; 设置背景尺寸。42.4px 是通过勾股定理求得(在我们的斜向条纹中,背景尺寸指定的是直角三角形的斜边长度,但条纹的宽度实际上是直角三角形的高,所以要让条纹宽度为 15px,就必须近似设置背景尺寸为 42.4px)。

可灵活设置角度的斜向条纹

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px); /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • repeating-linear-gradient 生成色标是无限循环重复的,直到填满整个背景。不需要通过 background-size 设置背景尺寸,而且也不用考虑斜边的问题,因为在渐变轴设置的长度就是条纹的宽度。最重要的一点是可以灵活设置任意角度的条纹,只要修改一处角度就可以。

复杂的背景图案

网格

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 没有特殊的,看代码吧。

波点

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 使用径向渐变 radial-gradient 来创建圆形、椭圆,或者它们的一部分。本例使用它实现圆点的阵列。
  • 然后生成两层错开的圆点阵列错开叠加到一起,这样就实现波点图案效果了。

棋盘

实现效果:

实现代码:

<div></div>
div {
/* 关键样式 */
background: #eee;
background-image:
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px; /* 其它样式 */
width: 300px;
height: 200px;
}

伪随机背景

实现效果:

重复平铺的几何图案很美观,但看起来可能有一些呆板。其实自然界中的事物都不是以无限平铺的方式存在的。即使重复,也往往伴随着多样性和随机性。因此为了更自然一些,我们可能需要实现的背景随机一些,这样就显得自然一点。

实现代码:

<div></div>
div {
/* 关键样式 */
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%; /* 其它样式 */
width: 300px;
height: 200px;
}

实现要点:

  • 为了使得背景的重复性小一些,每组的条纹宽度都是质数。

摘自:《CSS揭秘》 第 2 章 背景与边框

CSS3实现多种背景效果的更多相关文章

  1. 有趣的CSS3背景 斜条纹

    今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现 .noaccess { position: absolute; width: 300px; height: 100px; z-index: ...

  2. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  3. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  4. CSS3实现兼容性的渐变背景效果

    一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...

  5. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  6. CSS3与页面布局学习总结——多种页面布局

    一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见 ...

  7. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  8. [转:CSS3-前端] CSS3发光和多种图片处理

    原文链接:http://www.qianduan.net/css3-image-styles.html 一些上流的CSS3图片样式 神飞 发表于 24. Sep, 2011, 分类: CSS , 46 ...

  9. 应用多种变形CSS3

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

随机推荐

  1. spark概念、编程模型和模块概述

    http://blog.csdn.net/pipisorry/article/details/50931274 spark基本概念 Spark一种与 Hadoop 相似的通用的集群计算框架,通过将大量 ...

  2. Synchronize 和 Lock 的区别与用法

    一.synchronized和lock的用法区别 (1)synchronized(隐式锁):在需要同步的对象中加入此控制,synchronized可以加在方法上,也可以加在特定代码块中,括号中表示需要 ...

  3. 【一天一道LeetCode】#93. Restore IP Addresses

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  4. Python 编程常见问题

    Python 编程常见问题 经常使用Python编程,把经常遇到问题在这里记录一下,省得到网上查找,因此这篇文章会持续更新,需要的可以Mark一下.进入正题: 1.Python常用的文件头声明 #!/ ...

  5. The Singularity is Near---预测人工智能,科技走向的神书---奇点临近

    比尔盖茨评价本文作者: 雷·库兹韦尔是我所知道的预测人工智能未来最权威的人.他的这本耐人寻味的书预测未来信息技术得到空前发展,将促使人类超越自身的生物极限--以我们无法想象的方式超越我们的生命. 中文 ...

  6. hive的top n

    注意 hive 的hsql没有 top n这个功能,不像sql. 所以实现top n如下: 我想说的SELECT TOP N是取最大前N条或者最小前N条. Hive提供了limit关键字,再配合ord ...

  7. 前端框架Bootstrap - 快速搭建网站

    Bootstrap简介         Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和C ...

  8. 详解EBS接口开发之物料导入API

    create_item inv_item_grp.create_item(p_commit => fnd_api.g_true, -- p_item_rec => l_item_rec, ...

  9. ubuntu wubi.exe 直接加载下载好的 amd64.tar.xz

    玩了这么久的LINUX,一直都是直机装UBUNTU,虚一下XP的,后来不得不直机用WIN7,只能WUBI装一下UBUNTU了.不得不说,在WIN7下虚一个UBUNTU真是相当麻烦.网络那块很是难搞,而 ...

  10. JavaScript进阶(七)JS截取字符串substr 和 substring方法的区别

    JS截取字符串substr 和 substring方法的区别 substr方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参 ...