我发现了7个关于 CSS backgroundImage 好用的技巧

时间 2020-05-30

标签发现关于 css backgroundimage 好用技巧栏目 CSS 繁體版

原文原文链接

❝
做者：ryanmcdermott 译者：前端小智来源：githubcss
❞

❝
「点赞再看，养成习惯」html

「本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。」前端
❞

背景图像多是咱们全部前端开发人员在咱们的职业生涯中至少使用过几回的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但通过研究，答案并不是如此。因此本文收集了七个我认为最有用的技巧，并建立了一些代码示例。git

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

让背景图适配视口很容易，须要使用下面 CSS 便可：github

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;
}
复制代码

事例源码：codepen.io/duomly/pen/…web

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;
}
复制代码

事例源码：codepen.io/duomly/pen/…微信

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("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); } 复制代码

源码：codepen.io/duomly/pen/…

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
}
复制代码复制代码

源码：codepen.io/duomly/pen/…

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("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%),
复制代码复制代码

源码：codepen.io/duomly/pen/…

「你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。」

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>
复制代码

「scss」

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; } } 复制代码

源码：codepen.io/duomly/pen/…

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

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

「HTML」

<body>
  <h1>Hello world!</h1>
</body>
复制代码

「SCSS」

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; } 复制代码

源码：codepen.io/duomly/pen/…

「代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。」

原文:https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0

交流

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复「福利」，便可看到福利，你懂的。