09月22日, 2014 260次
背景图像可能是我们全部前端研究人员在我们的职业生涯中至少使用过几次的CSS属性之一。往往一般状态人认为背景图像不可能有所有不寻常的地方，但经历过研究，答案并非如此。所以本文获取了七个我认为最有用的技术，并创建了一些代码示例。
1.背景图怎么样才能完美适配视口
让背景图适配视口很简无脑单，需要使用下面 CSS 就可：
body {
background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
2.怎么样在CSS中使用多个背景图片？
如果我想在背景中添加一张以上的图片怎么办？CSS3 中应该直接 指定多个背景路径，如下所示：
body {
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
3.怎么样创建一个三角形的背景图像
另外一个很酷的背景特效只是三角形背景，当我们想展示某些完整不一样的选择（例如白天和黑夜或冬季和夏天）时，这种特效就更加棒。
思路是这样的，首先创建两个div，之后将两个背景都添加到之中，之后，第二个div使用clip-path属性画出三角形。
<body>
<div class="day"></div>
<div class="night"></div>
</body>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
height: 100vh;
width: 100vw;
}
.day {
background-image: url("images.unsplash.com/photo-14779…");
background-size: cover;
background-repeat: no-repeat;
}
.night {
background-image: url("images.unsplash.com/photo-14935…");
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
4.怎么样在背景图像上添加叠加渐变？
有时我们想在背景上添加一些文字，但一些图片太亮，导致字看不清楚，所以这里我们就需要让背景图叠加一些暗乐来出众文字效果。
例如，应该通过添加粉红橙色渐变或红色至透视渐变来增强日落图像，这些状态下使用叠加的渐变就很简无脑单做到。
body {
background-image:
linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center
}
5.怎么样创建一个颜色动态变化的背景
如果你很多颜色，你想确认哪种颜色更加的适合背景图片的颜色，刚动态更改背景颜色的技术就很有用。
@keyframes background-overlay-animation {
0% {
background-image:
linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
}
25% {
background-image:
linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
}
50% {
background-image:
linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
}
100% {
background-image:
linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
}
}
@-webkit-keyframes background-overlay-animation {
0% {
background-image:
linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%)
url("images.unsplash.com/photo-15593…");
}
25% {
background-image:
linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
url("images.unsplash.com/photo-15593…");
}
50% {
background-image:
linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
url("images.unsplash.com/photo-15593…");
}
100% {
background-image:
linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
6. 怎么样生产网格背景图像？
一些时候会接触一些需要有艺术或者摄影类的项目，他们往往一般要求网址要有艺术消息，要有创意。网络的背景就挺有创意的，效果如下:
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: black;
display: grid;
grid-template-columns: 25fr 30fr 40fr 15fr;
grid-template-rows: 20fr 45fr 5fr 30fr;
grid-gap: 20px;
.item_img {
background-image: url('images.unsplash.com/photo-14998…');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
}
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: black;
display: grid;
grid-template-columns: 25fr 30fr 40fr 15fr;
grid-template-rows: 20fr 45fr 5fr 30fr;
grid-gap: 20px;
.item_img {
background-image: url('images.unsplash.com/photo-14998…');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
}
7.怎么样将背景图像设置为文本颜色？
使用background-image与background-clip，应该实现背景图像对文字的优美效果。 在某些状态下，它可能超级有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的状态。
<body>
<h1>Hello world!</h1>
</body>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
min-height: 100vh;
font-size: 120px;
font-family:Arial, Helvetica, sans-serif;
}
h1 {
background-image: url("images.unsplash.com/photo-14622…");
background-clip: text;
-webkit-background-clip: text;
color: transparent;