一、灵活的背景定位
背景知识：background-position，background-origin，calc() 函数
很多时候，我们想让某个图片可以基于元素自身的尺寸以及某个位置的偏移量实现定位，那如何比较灵活地实现呢？有以下三种解决方案：
1、background-position 的扩展语法方案
代码示例：
.bg-position {
margin: 50px auto;
padding: 10px;
width: 600px;
background: #f0f url("img/i_bookmark1.png") right bottom no-repeat;
background-position: right 20px bottom 10px;
}
background-position 定位效果图
小结：
1、在所要设置的偏移量前设置top、right、bottom、left关键字
2、为了向前兼容，需要设置：background：url() no-repeat right bottom color; background-position: right 20px bottom 10px;
2、background-origin 方案
在给背景图设置偏移量与容器的内边距一致时，如果用 background-position，需要每次改动内边距的数值，不能自动跟随设定的内边距走，这时我们可以借助 background-origin 的content-box 来实现。
代码示例：
.bg-origin {
margin: 50px auto;
padding: 20px;
width: 600px;
background: #f0f url("img/i_bookmark1.png") right bottom no-repeat;
background-origin: content-box;
}
backgroud-origin 背景定位效果图
小结：
1、background-origin 有三个属性值：border-box、padding-box（默认）、content-box；
2、要实现与上面相同的效果：需要借助 padding 这个内边距 和 content-box 俩实现
3、calc () 方案
有时候我们需要有一个类似 100% - 10px 的水平或者竖直的偏移量，这样要怎么实现呢？
这里就要借助 calc() 函数来执行此类运算。
代码示例：
.bg-calc {
margin: 50px auto;
padding: 20px;
width: 600px;
background: #f0f url("img/i_bookmark1.png") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
}
calc() 背景定位方案
小结：
calc()函数内部的 - 和 + 运算符两侧必须加一个空格符，避免产生解析错误
二、条纹背景
背景知识：linear-gradient，repeating-linear-gradient，background-size
主要介绍了水平、竖直和斜向条纹的实现，如下：
示例代码：
<div class="horizontal-stripe stripe"></div>
<div class="vertical-stripe stripe"></div>
<div class="diagonal-stripe stripe"></div>
.horizontal-stripe {
width: 100px;
height: 300px;
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 10px;
}
.vertical-stripe {
width: 300px;
height: 100px;
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 20px 100%;
}
.diagonal-stripe {
width: 300px;
height: 300px;
background: repeating-linear-gradient(-45deg, #fb3 0, #fb3 20px, #58a 0, #58a 50px);
}
三种简单条纹背景效果图
三、复杂的背景图案
背景知识：radial-gradient， linear-gradient，background-image
两个示例：斑点背景和棋盘背景
代码示例：
<div class="polka-dot stripe"></div>
<div class="checkerboard stripe"></div>
.polka-dot {
width: 300px;
height: 300px;
background: #58a;
background-image: radial-gradient(#ddd 20%, transparent 0), radial-gradient(#ddd 20%, transparent 0);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
.checkerboard {
width: 300px;
height: 300px;
background: #000;
background-image: linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0), linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
斑点和棋盘背景效果图
四、伪随机背景
背景知识：background-image
有时候我们可能需要随机的而不是规则的背景图，那么这个用 css 如何实现呢？
这里还是借用 background-image 属性来实现，实现原理：利用不同尺寸的背景图的重复性，再结合数学的最小公倍数和质数的原理制作伪随机背景图
代码示例如下：
<div class="pseudorandom-stripe stripe"></div>
.pseudorandom-stripe {
margin-top: 20px;
width: 500px;
height: 200px;
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 43px, transparent 0);
background-size: 83px 100%, 61px 100%, 81px 100%;
}
伪随机背景效果图
五、文本行的斑马条纹
背景知识：background-image，linear-gradient
在很多场合我们都能看到文本行上下间隔出现不同的背景色，类似斑马条纹，那如何实现呢？
原理：此效果主要是利用了条纹背景和灵活的背景定位两个思路实现的，注意它的背景尺寸大小是 line-height 的两倍。
代码示例：
<p class="zebra-lines">此效果主要是利用了条纹背景和灵活的背景定位两个思路实现的，注意它的背景尺寸大小是line-height 的两倍。</p>
.zebra-lines {
max-width: 8em;
padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(rgba(0, 0, 0, .3) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
斑马条纹状的文本
六、如何扩大点击区域
背景知识：background-clip，box-shadow，伪元素的使用
很多时候为了提高用户体验，我们一般会针对某个区域做些特殊处理，又能让用户看起来不那么的怪异。现在手机的普遍性，没有人愿意在狭小的屏幕上尝试点击多次，因此扩大点击区域就显得尤为重要，那 css 如何实现呢？
请看代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>扩大点击区域</title>
<style type="text/css">
input {
width: 100px;
height: 50px;
border: 10px solid transparent;
/*避免按钮的可见区域变大*/
background-clip: padding-box;
/*生成一个border*/
box-shadow: 0 0 0 1px rgba(0.3) inset, 0 .1em .2em -.05em rgba(0, 0, 0, .5);
position: relative;
}
/*设置热区:在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向上都比宿主元素大出 10px：*/
input::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
</style>
</head>
<body>
<input type="button" value="点我" />
</body>
</html>
七、滚动提示
背景知识：css 渐变，background-attachment
滚动提示，顾名思义，就是提示用户还有内容，如何能做到更好的用户体验，不会显得太突兀，看看 css 是如何实现的吧！
滚动提示的目的是：让背景图像跟着元素的内容一起滚动。这里引入了background-attachment 的 local 和 scroll 这两个属性。
实现原理是：引入两个背景图层，一个用来生成阴影，一个用来生成白色的透明遮罩；上面的 background 样式一个是顶部一个是在底部。
代码示例：
<ul>
<li>Ada Catlace</li>
<li>Alan Purring</li>
<li>Schrödingcat</li>
<li>Tim Purrners-Lee</li>
<li>Webkitty</li>
<li>Json</li>
<li>Void</li>
<li>Neko</li>
<li>NaN</li>
<li>Cat5</li>
<li>Vector</li>
</ul
ul {
display: inline-block;
overflow: auto;
width: 7.2em;
height: 7em;
border: 1px solid silver;
padding: .3em .5em;
list-style: none;
margin-top: 2em;
font: 100 200%/1.6 'Frutiger LT Std', sans-serif;
background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
margin-top: 30px;
}
滚动提示效果图
网友评论