6個(gè)CSS背景圖片設(shè)置的方法技巧-創(chuàng)新互聯(lián)

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

十年的劍河網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整劍河建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“劍河網(wǎng)站設(shè)計(jì)”,“劍河網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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è)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。

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í)。

這是通過(guò)為整個(gè)視口創(chuàng)建兩個(gè)div來(lái)完成的，然后需要向它們兩個(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í)，它會(huì)很有用，同時(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è)不錯(cuò)的背景圖像

<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è)置為文本顏色

通過(guò)將背景圖像與背景剪輯配合使用，可以實(shí)現(xiàn)背景圖像對(duì)文字的優(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)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章題目：6個(gè)CSS背景圖片設(shè)置的方法技巧-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://muchs.cn/article30/dsgoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)