<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>

<dd id="ycqsw"><menu id="ycqsw"></menu></dd>

<nav id="ycqsw"></nav>

<menu id="ycqsw"><strong id="ycqsw"></strong></menu>

<xmp id="ycqsw"><nav id="ycqsw"></nav>

html怎么用css插入背景圖片（前端背景圖片添加方法）

長城號SEO專員 ? 2021年8月18日 09:29:52 ? 投稿

背景圖像可能是我們所有前端開發人員在我們的職業生涯中至少使用過幾次的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;
}

7個關于 CSS backgroundImage 好用的技巧

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

7個關于 CSS backgroundImage 好用的技巧

3.如何創建一個三角形的背景圖像

另一個很酷的背景特效就是三角形背景，當我們想展示某些完全不同的選擇（例如白天和黑夜或冬天和夏天）時，這種特效就更加棒。

思路是這樣的，首先創建兩個div，然后將兩個背景都添加到其中，然后，第二個div使用clip-path屬性畫出三角形。

7個關于 CSS backgroundImage 好用的技巧

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

4.如何在背景圖像上添加疊加漸變？

有時我們想在背景上添加一些文字，但有的圖片太亮，導致字看不清楚，所以這里我們就需要讓背景圖疊加一些暗樂來突出文字效果。

例如，可以通過添加粉紅橙色漸變或紅色至透明漸變來增強日落圖像，這些情況下使用疊加的漸變就很容易做到。

7個關于 CSS backgroundImage 好用的技巧

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
}

5.如何創建一個顏色動態變化的背景

如果你很多顏色，你想確認哪種顏色更適合背景圖片的顏色，剛動態更改背景顏色的技巧就很有用。

@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%),

7個關于 CSS backgroundImage 好用的技巧

6. 如何制作網格背景圖像？

有時候會遇到一些需要有藝術或者攝影類的項目，他們一般要求網站要有藝術信息，要有創意。網絡的背景就挺有創意的，效果如下:

7個關于 CSS backgroundImage 好用的技巧

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

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

7.如何將背景圖像設置為文本顏色？

使用background-image與background-clip，可以實現背景圖像對文字的優美效果。在某些情況下，它可能非常有用，尤其是當我們想創建一個較大的文本標題而又不如普通顏色那么枯燥的情況。

7個關于 CSS backgroundImage 好用的技巧

<body>
  <h1>Hello world!</h1>
</body>

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

點擊展開全文

贊 (0)

長城號SEO專員管理員

css怎么用，divcss布局經典實例

雖然CSS簡單，但CSS是一門非常有意思的語言，CSS每年都有變化，而且都有不同的博主都在不同的時間段總結一些CSS的新特性。雖然這些新特性無法立刻得到眾多瀏覽器的支持，但總是隨著…
劉英
2020年2月29日 ? 投稿
投稿
網頁設計css是什么意思（解析有關CSS代碼所有知識）
CSS代碼長什么樣？ CSS的代碼是類似 json 數據的鍵值對，也就是key : value，當然，每一句都必須以分號（；）結束，切記，沒有分號會出問題的。其實類似 json …
長城號SEO專員
2021年6月24日
簡述什么是css以及css的作用（詳解css概念和作用）

聊起css，印象最深刻的就是剛畢業那會剛開始從事前端開發崗位工作的時候，身為一名 cut picture boy(切圖仔)，在頁面布局及還原設計圖中廣泛使用css來開發頁面，我記得…
長城號SEO專員
2021年6月24日 ? 投稿
什么是css樣式及作用（css特效樣式知識解析）

上幾節我們把HTML相關的必要知識點給大家已經講完，剩下的細節大家可以查閱資料再進行深入研究。從這一節開始，我們正式進入CSS的學習，在學習之前我們先介紹幾個概念。第一，什么是C…
長城號SEO專員
2021年7月1日 ? 投稿
投稿
css新特性有哪些（詳細介紹css的9大新特性）
1、透明度 rgba和opacity都可以設置透明的。 rgba(red, green, blue, alpha)：alpha是0-1透明度，0時顏色為完全透明，1是完全不透明。 …
長城號SEO專員
2021年7月24日
超出顯示省略號兼容寫法（css文字溢出變省略號）

說說css最常見的知識，實現單行、雙行文本溢出顯示省略號！如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度wi…
長城號SEO專員
2021年8月6日 ? 投稿

版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容，請發送郵件至舉報，一經查實，本站將立刻刪除。

發表評論

登錄后才能評論

国产精品区一区二区免费