Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
husky-dot opened this issue May 19, 2020 · 0 comments
Open

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

husky-dot opened this issue May 19, 2020 · 0 comments

Comments

@husky-dot
Copy link
Owner

❝

作者：ryanmcdermott 译者：前端小智 来源：github

❞
❝

「点赞再看，养成习惯」

「本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。」

❞

背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的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;
}

事例源码：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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2613&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;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>

「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('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;

}

}

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

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("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");

background-clip: text;

-webkit-background-clip: text;

color: transparent;

}

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

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

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

交流

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复「福利」，即可看到福利，你懂的。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@husky-dot