CSS backgroundImage 7个好用的技巧

博主： Dirge
发布时间：2022 年 04 月 16 日
468 次浏览
2 条评论
6373字数
分类：建站知识

作者：ryanmcdermott
译者：前端小智
引用：https://segmentfault.com/a/1190000025147899

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;
}

示例源码：https://codepen.io/duomly/pen/xxwYBOE

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;
}

示例源码：https://codepen.io/duomly/pen/eYpVoJR

3.如何创建一个三角形的背景图像

另一个很酷的背景特效就是三角形背景，当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时，这种特效就更加棒。

思路是这样的，首先创建两个div，然后将两个背景都添加到其中，然后，第二个div使用clip-path属性画出三角形。

html

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

css

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

源码：https://codepen.io/duomly/pen/RwWQmwW

4.如何在背景图像上添加叠加渐变？

有时我们想在背景上添加一些文字，但有的图片太亮，导致字看不清楚，所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。

例如，可以通过添加粉红橙色渐变或红色至透明渐变来增强日落图像，这些情况下使用叠加的渐变就很容易做到。

css

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
}

源码：https://codepen.io/duomly/pen/rNOJgQE

5.如何创建一个颜色动态变化的背景

如果你很多颜色，你想确认哪种颜色更适合背景图片的颜色，刚动态更改背景颜色的技巧就很有用。

css

HTML CSSResult
EDIT ON
@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("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%),

源码：https://codepen.io/duomly/pen/gOavNOv

6. 如何制作网格背景图像？

有时候会遇到一些需要有艺术或者摄影类的项目，他们一般要求网站要有艺术信息，要有创意。网络的背景就挺有创意的，效果如下:

HTML

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>

css

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('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
}

源码：https://codepen.io/duomly/pen/MWaQNWb

7.如何将背景图像设置为文本颜色？

使用background-image与 background-clip ，可以实现背景图像对文字的优美效果。在某些情况下，它可能非常有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。

HTML

<body>
  <h1>Hello world!</h1>
</body>

CSS

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("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

源码：https://codepen.io/duomly/pen/wvKyVjG

最后修改：2023 年 02 月 27 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

hudyxeipxl
October 7th, 2025 at 05:54 pm

2025年10月新盘做第一批吃螃蟹的人coinsrore.com
新车新盘嘎嘎稳嘎嘎靠谱coinsrore.com
新车首发，新的一年，只带想赚米的人coinsrore.com
新盘上车集合留下我要发发立马进裙coinsrore.com
做了几十年的项目我总结了最好的一个盘（纯干货）coinsrore.com
新车上路，只带前10个人coinsrore.com
新盘首开新盘首开征召客户！！！coinsrore.com
新项目准备上线，寻找志同道合的合作伙伴coinsrore.com
新车即将上线真正的项目，期待你的参与coinsrore.com
新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
新盘新盘这个月刚上新盘新车第一个吃螃蟹！coinsrore.com

回复
dfsqqlpwxp
October 7th, 2025 at 05:54 pm

2025年10月新盘做第一批吃螃蟹的人coinsrore.com
新车新盘嘎嘎稳嘎嘎靠谱coinsrore.com
新车首发，新的一年，只带想赚米的人coinsrore.com
新盘上车集合留下我要发发立马进裙coinsrore.com
做了几十年的项目我总结了最好的一个盘（纯干货）coinsrore.com
新车上路，只带前10个人coinsrore.com
新盘首开新盘首开征召客户！！！coinsrore.com
新项目准备上线，寻找志同道合的合作伙伴coinsrore.com
新车即将上线真正的项目，期待你的参与coinsrore.com
新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
新盘新盘这个月刚上新盘新车第一个吃螃蟹！coinsrore.com

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

CSS backgroundImage 7个好用的技巧

Dirge • 2022 年 04 月 16 日

作者：ryanmcdermott 译者：前端小智 引用：<a class="no-external-link" href="https://segmentfault.com/a/1190000025147899" target="_blank">https://segmentfault.com/a/1190000025147899</a><h2>1.背景图如何才能完美适配视口</h2>让背景图适配视口很容易，需要使用下面 CSS 即可：<pre><code>body {
 background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2253&amp;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;
}</code></pre>示例源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/xxwYBOE" target="_blank">https://codepen.io/duomly/pen/xxwYBOE</a><h2>2.如何在CSS中使用多个背景图片？</h2>如果我想在背景中添加一张以上的图片怎么办？CSS3 中可以直接 指定多个背景路径，如下所示：<pre><code>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&amp;auto=format&amp;fit=crop&amp;w=2212&amp;q=80);
 background-position: center, top;
 background-repeat: repeat, no-repeat;
 background-size: contain, cover;
}</code></pre>示例源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/eYpVoJR" target="_blank">https://codepen.io/duomly/pen/eYpVoJR</a><h2>3.如何创建一个三角形的背景图像</h2>另一个很酷的背景特效就是三角形背景，当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时，这种特效就更加棒。思路是这样的，首先创建两个<code>div</code>，然后将两个背景都添加到其中，然后，第二个<code>div</code>使用<code>clip-path</code>属性画出三角形。html<pre><code>&lt;body&gt;
 &lt;div class=&quot;day&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;night&quot;&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>css<pre><code>body {
 margin: 0;
 padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url(&quot;https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2613&amp;q=80&quot;);
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
 background-image: url(&quot;https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 background-size: cover;
 background-repeat: no-repeat;
 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}</code></pre>源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/RwWQmwW" target="_blank">https://codepen.io/duomly/pen/RwWQmwW</a><h2>4.如何在背景图像上添加叠加渐变？</h2>有时我们想在背景上添加一些文字，但有的图片太亮，导致字看不清楚，所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。例如，可以通过添加粉红橙色渐变或红色至透明渐变来增强日落图像，这些情况下使用叠加的渐变就很容易做到。css<pre><code>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(&quot;https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center
}</code></pre>源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/rNOJgQE" target="_blank">https://codepen.io/duomly/pen/rNOJgQE</a><h2>5.如何创建一个颜色动态变化的背景</h2>如果你很多颜色，你想确认哪种颜色更适合背景图片的颜色，刚动态更改背景颜色的技巧就很有用。css<pre><code>HTML CSSResult
EDIT ON
@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(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 25% {
 background-image: 
 linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 50% {
 background-image: 
 linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
 url(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 100% {
 background-image: 
 linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
 url(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
}

@-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(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 25% {
 background-image: 
 linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
 url(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 50% {
 background-image: 
 linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
 url(&quot;https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80&quot;);
 }
 100% {
 background-image: 
 linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
 </code></pre>源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/gOavNOv" target="_blank">https://codepen.io/duomly/pen/gOavNOv</a><h2>6. 如何制作网格背景图像？</h2>有时候会遇到一些需要有艺术或者摄影类的项目，他们一般要求网站要有艺术信息，要有创意。网络的背景就挺有创意的，效果如下:HTML<pre><code>&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item_img&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre>css<pre><code>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('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2207&amp;q=80');
 background-repeat: no-repeat;
 background-position: center;
 background-attachment: fixed;
 background-size: cover;
}
}</code></pre>源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/MWaQNWb" target="_blank">https://codepen.io/duomly/pen/MWaQNWb</a><h2>7.如何将背景图像设置为文本颜色？</h2>使用<code>background-image</code>与<code> background-clip </code>，可以实现背景图像对文字的优美效果。 在某些情况下，它可能非常有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。HTML<pre><code>&lt;body&gt;
 &lt;h1&gt;Hello world!&lt;/h1&gt;
&lt;/body&gt;</code></pre>CSS<pre><code>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(&quot;https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2600&amp;q=80&quot;);
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
}</code></pre>源码：<a class="no-external-link" href="https://codepen.io/duomly/pen/wvKyVjG" target="_blank">https://codepen.io/duomly/pen/wvKyVjG</a>

CSS backgroundImage 7个好用的技巧

1.背景图如何才能完美适配视口

2.如何在CSS中使用多个背景图片？

3.如何创建一个三角形的背景图像

4.如何在背景图像上添加叠加渐变？

5.如何创建一个颜色动态变化的背景

6. 如何制作网格背景图像？

7.如何将背景图像设置为文本颜色？

2 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Proxmox VE 的一些问题及解决办法

记录Dell iDrac更新固件遇到的问题

ixgbe驱动不支持三方兼容光模块SFP

OnePoint搭建教程（CloudFlare篇）

【Docker】自建vaultwarden密码管理器

【Docker】自建vaultwarden密码管理器

ipmitool的一些用法

Debian 11破解root密码

基于Zero Trust的内网穿透服务，远程管理家庭设备

Centos 7 安装 Cacti 1.2.25 教程记录

CSS backgroundImage 7个好用的技巧

1.背景图如何才能完美适配视口

2.如何在CSS中使用多个背景图片？

3.如何创建一个三角形的背景图像

4.如何在背景图像上添加叠加渐变？

5.如何创建一个颜色动态变化的背景

6. 如何制作网格背景图像？

7.如何将背景图像设置为文本颜色？

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

CSS backgroundImage 7个好用的技巧

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款