HTML如何設置div背景圖片的的透明度

這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。

方法一：使用偽元素

這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。

在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。

文簡介

點贊 + 關注 + 收藏 = 學會了

IText 是 Fabric.js 提供的一個 可編輯文本 的元素。

要設置文字顏色，可以設置 fill 。

但 fill 會設置所有文字的顏色，如果你只想修改指定文字的顏色，只用 fill 就不是那么容易實現了。

本文要講的就是 設置指定文字的顏色和背景色。

設置文字顏色或背景色，需要分情況討論的：

全文設置
設置指定文字顏色（單行）
設置指定文字顏色（多行）

接下來就將上述情況逐一講解。

起步

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化畫布
  const canvas = new fabric.Canvas('c')

  // 創建文本
  const iText = new fabric.IText('hello world')

  // 將文本添加到畫布里
  canvas.add(iText)
</script>
復制代碼

首先把 Fabric.js 引入，然后初始化畫布。如果對這個概念不太熟的話，可以看看 Fabric.js 從入門到膨脹。

最后通過 new fabric.IText 創建一段文字添加到畫布中。

全文設置

// 省略部分代碼

const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
復制代碼

fill 可以設置文字的填充顏色。在 Fabric.js 里是使用這個屬性設置顏色的，和 css 設置文字顏色使用 color 不一樣~

單行：設置指定文字顏色

const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fill: '#f00' // 文字顏色，#f00是紅色
      }
    }
  }
})
復制代碼

第一次看到上面的代碼時我也覺得有點奇怪，后來仔細看了下才發現這樣設計的用意。

styles 是一個對象。

styles: { // 設置樣式
  0: { // 第1行
    1: { // 第2個字符
      // 要設置的樣式
    }
  }
}
復制代碼

上面這段代碼是這個意思。行號和字符位置都是從0開始算起，有點像數組下標的意思。

我們這個例子只有1行，所以行號是0。

e 的下標是 1 。所以上面的代碼就把 e 設置成紅色了。其他字符還是默認的顏色。

多行：設置指定文字顏色

const iText = new fabric.IText('hello\nworld', {
  styles: { // 設置樣式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字顏色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
復制代碼

IText 的換行是用 \n 來表達的。

這個例子要 修改第1行第2個字符的文字顏色為紅色，第2行第3個字符為亮粉色 。

從代碼里的注釋應該可以看得懂本次操作。

設置文字背景色

const iText = new fabric.IText('hello world', {
  styles: {
  0: {
    1: {
      textBackgroundColor: 'yellowgreen', // 背景色
    }
  },
})
復制代碼

和設置文字顏色的原理一樣，只是把關鍵字改一改就行。

textBackgroundColor 翻譯成中文就是文本背景色。

代碼倉庫

?Fabric 設置IText指定字符顏色和背景色

推薦閱讀

《Fabric.js 筆刷到底怎么用？》

《Fabric.js 圓形筆刷》

《純CSS 紅磚背景墻》

《Fabric.js 自由繪制橢圓》

SS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

background-color 背景顏色
background-image 背景圖片地址
background-repeat 是否平鋪
background-position 背景位置
background-attachment 背景固定還是滾動
背景的合寫（復合屬性） background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的）

url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧：我們提倡背景圖片后面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length
?
background-position : position || position

參數：

length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。

如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。

注意：

position 后面是x坐標和y坐標。可以使用方位名詞或者精確單位。
如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附著

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動

fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最后一個參數是alpha 透明度取值范圍 0~1之間

注意：背景半透明是指盒子背景半透明，盒子里面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中。

在線咨詢

上一篇：css中如何讓div水平居中(上)
下一篇：HTML 顏色

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商