CSS3实现多种背景效果

灵活的背景定位

实现效果:

将背景图定位到距离容器底边 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 章 背景与边框

原文发布于微信公众号 - 前端布道(FontendPreach)

原文发表时间:2018-05-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS3实现多样的边框效果

1061
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2806
来自专栏AndroidTv

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

952
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

2776
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

3738
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

1041
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

3488
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2566
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

955
来自专栏郭耀华‘s Blog

Android——界面特效 相关知识总结贴

帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动...

3299

扫码关注云+社区