我發(fā)現(xiàn)了7個關(guān)于 CSS backgroundImage 好用的技巧
作者：前端小智
大多數(shù)人認(rèn)為背景圖像不可能有任何不尋常的地方，但經(jīng)過研究，答案并非如此。所以本文收集了七個我認(rèn)為最有用的技巧，并創(chuàng)建了一些代碼示例。
本文轉(zhuǎn)載自微信公眾號「大遷世界」，轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
背景圖像可能是我們所有前端開發(fā)人員在我們的職業(yè)生涯中至少使用過幾次的CSS屬性之一。大多數(shù)人認(rèn)為背景圖像不可能有任何不尋常的地方，但經(jīng)過研究，答案并非如此。所以本文收集了七個我認(rèn)為最有用的技巧，并創(chuàng)建了一些代碼示例。
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. 如何創(chuàng)建一個三角形的背景圖像
另一個很酷的背景特效就是三角形背景，當(dāng)我們想展示某些完全不同的選擇(例如白天和黑夜或冬天和夏天)時，這種特效就更加棒。
思路是這樣的，首先創(chuàng)建兩個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. 如何在背景圖像上添加疊加漸變?
有時我們想在背景上添加一些文字，但有的圖片太亮，導(dǎo)致字看不清楚，所以這里我們就需要讓背景圖疊加一些暗樂來突出文字效果。
例如，可以通過添加粉紅橙色漸變或紅色至透明漸變來增強日落圖像，這些情況下使用疊加的漸變就很容易做到。
「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. 如何創(chuàng)建一個顏色動態(tài)變化的背景
如果你很多顏色，你想確認(rèn)哪種顏色更適合背景圖片的顏色，剛動態(tài)更改背景顏色的技巧就很有用。
「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. 如何制作網(wǎng)格背景圖像?
有時候會遇到一些需要有藝術(shù)或者攝影類的項目，他們一般要求網(wǎng)站要有藝術(shù)信息，要有創(chuàng)意。網(wǎng)絡(luò)的背景就挺有創(chuàng)意的，效果如下:
「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&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. 如何將背景圖像設(shè)置為文本顏色?
使用background-image與background-clip，可以實現(xiàn)背景圖像對文字的優(yōu)美效果。在某些情況下，它可能非常有用，尤其是當(dāng)我們想創(chuàng)建一個較大的文本標(biāo)題而又不如普通顏色那么枯燥的情況。
「HTML」
- <body>
- <h1>Hello world!</h1>
- </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&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/wvKyVjG
責(zé)任編輯：趙寧寧
來源：
大遷世界
