溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

6個(gè)CSS背景圖片設(shè)置的方法技巧

發(fā)布時(shí)間：2021-03-19 09:32:13 來源：億速云 閱讀：173 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)6個(gè)CSS背景圖片設(shè)置的方法技巧，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1.如何將背景圖像完美地適合視口

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

background-attachment設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。

6個(gè)CSS背景圖片設(shè)置的方法技巧

2.如何在CSS中使用多個(gè)背景圖片

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

6個(gè)CSS背景圖片設(shè)置的方法技巧

3.如何創(chuàng)建三角背景圖像

當(dāng)我們想展示某些完全不同的選擇（例如白天和黑夜或冬天和夏天）時(shí)。

這是通過為整個(gè)視口創(chuàng)建兩個(gè)div來完成的，然后需要向它們兩個(gè)都添加背景圖像，然后，第二個(gè)div需要一個(gè)clip-path屬性才能創(chuàng)建三角形。

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

clip-path屬性創(chuàng)建一個(gè)裁剪區(qū)域，該區(qū)域設(shè)置應(yīng)顯示元素的哪一部分。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。

6個(gè)CSS背景圖片設(shè)置的方法技巧

4.如何在我的背景圖像上添加漸變疊加、

想在圖像上放置一些文本但背景太淺文本顯示不清晰時(shí)，它會很有用，同時(shí)它也可以改善圖像本身

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
}

6個(gè)CSS背景圖片設(shè)置的方法技巧

5.如何制作網(wǎng)格背景圖片

使用CSS網(wǎng)格和CSS背景圖像創(chuàng)建一個(gè)不錯的背景圖像

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

6個(gè)CSS背景圖片設(shè)置的方法技巧

6.如何將背景圖像設(shè)置為文本顏色

通過將背景圖像與背景剪輯配合使用，可以實(shí)現(xiàn)背景圖像對文字的優(yōu)美效果。在某些情況下，它可能非常有用，尤其是當(dāng)您想創(chuàng)建一個(gè)較大的文本標(biāo)題但又不如普通顏色那么枯燥時(shí)。

<body>
  <h2>Hello world!</h2>
</body>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
}

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

6個(gè)CSS背景圖片設(shè)置的方法技巧

關(guān)于“6個(gè)CSS背景圖片設(shè)置的方法技巧”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手