7個關於 CSS backgroundImage 好用的技巧

原創 攻城狮Lee丶 2020-05-20 23:50

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

clipboard.png

事例源碼：https://codepen.io/duomly/pen...點擊預覽

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

clipboard.png

事例源碼：https://codepen.io/duomly/pen...點擊預覽

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

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

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

clipboard.png

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...點擊預覽

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

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

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

clipboard.png

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...點擊預覽

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&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...點擊預覽

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

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

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

clipboard.png

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...點擊預覽

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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

源碼：https://codepen.io/duomly/pen...點擊預覽

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

CSS預處理器和後處理器

css預處理器 一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人 2020-07-08 09:19:30

css剩餘部分

一、link和@import的區別 頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人 2020-07-08 09:19:30

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

bootstrap側邊導航欄的實現

https://blog.csdn.net/kebi007/article/details/76038251 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

吃鱼的羊 2020-07-08 05:50:47

移動web端css實現文本單行省略及多行省略

單行省略： selector{ text-overflow: ellipsis;/*這就是省略號嘍*/ overflow: hidden;/*設置超過的隱藏*/ white-space: nowrap;/*設置不斷行*/

Tyler-阿信 2020-07-08 04:54:20

CSS hack 整理（更新於20141109）

瀏覽器的兼容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分

Tyler-阿信 2020-07-08 04:54:20

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

CSS 基礎（020_下拉式菜單）

原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻譯： CSS 下拉式菜單（CSS Dropdowns） 使用 CSS 創建可懸停、下拉式菜單。 演示：下拉式菜單示例 移

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（019_導航欄）

原始網址：http://www.w3schools.com/css/css_navbar.asp 翻譯： CSS 導航欄 演示：導航欄 <!DOCTYPE html> <html lang="en-US"><head><me

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（009_Max-width）

原始網址：http://www.w3schools.com/css/css_max-width.asp 翻譯： CSS Layout - width and max-width 使用 width，max-width 和 marg

柯南道尔2606 2020-07-07 23:39:15

CSS3 基礎（005_3D 變換）

原始網址：http://www.w3schools.com/css/css3_3dtransforms.asp 翻譯： CSS3 3D 變換（CSS3 3D Transforms） CSS 3D 變換 CSS3 允許你使用 3D

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（014_Align）

原始網址：http://www.w3schools.com/css/css_align.asp 翻譯： CSS Layout - Horizontal & Vertical Align <!DOCTYPE html> <html

柯南道尔2606 2020-07-07 23:39:15