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內部有內容的情況下會影響到整個組件體系的樣式。

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

構建現代網頁時，圖片是不可或缺的元素之一。它們能夠增強視覺吸引力，幫助傳達信息，并提升用戶體驗。然而，如果圖片沒有得到適當的優化，它們可能會顯著拖慢網站的加載速度，影響用戶體驗和搜索引擎優化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優化這些格式的策略和示例。

常見的圖片格式

JPEG（或JPG）

優點：支持高色彩深度，適合處理照片和復雜的圖像。
缺點：有損壓縮，可能會在高壓縮率下失去細節。
使用場景：適用于色彩豐富且沒有透明度要求的圖片。

PNG

優點：支持透明度，無損壓縮，保留細節。
缺點：文件大小通常大于JPEG。
使用場景：適用于需要透明度或者高保真度的圖形，如徽標和圖標。

GIF

優點：支持動畫和透明度（僅限單色透明）。
缺點：僅支持256色，質量較低。
使用場景：適用于簡單動畫和小圖標。

WebP

優點：支持透明度和有損以及無損壓縮，壓縮率高于JPEG和PNG。
缺點：兼容性不如JPEG和PNG廣泛。
使用場景：適用于需要優化加載速度的網頁，同時保持較高的圖像質量。

SVG

優點：矢量格式，可無限放大而不失真，文件大小小。
缺點：不適合復雜的照片。
使用場景：適用于圖標、徽標、圖表和其他可縮放圖形。

圖片優化策略

選擇正確的格式

根據圖片內容和用途選擇最合適的格式。例如，對于網頁上的照片，JPEG可能是最佳選擇，因為它在保持相對較小的文件大小的同時提供了良好的圖像質量。對于需要透明背景的圖標，PNG可能更合適。

壓縮圖片

使用工具或服務壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲為Web所用格式”功能來減小JPEG文件的大小。

調整尺寸

根據需要在網頁中顯示的大小調整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因為這會導致不必要的加載時間。

使用響應式圖片

通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。

延遲加載

對于非視口內的圖片，可以使用延遲加載（lazy loading）技術。這樣，只有當用戶滾動到圖片位置時，圖片才會加載。

使用CDN

使用內容分發網絡（CDN）來分發圖片，可以減少加載時間，因為圖片會從離用戶最近的服務器加載。

實例分析

示例1：優化網頁照片

假設你有一個高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網頁上以800x600像素的尺寸展示，那么：

使用圖像編輯工具將尺寸調整為800x600像素。
選擇JPEG格式，并設置合適的壓縮比例，比如70%的質量。
使用TinyJPG等在線工具進一步壓縮處理。
TinyJPG – Compress WebP, PNG and JPEG images intelligently

優化后的圖片可能只有100KB左右，大大減少了加載時間。

示例2：優化圖標

如果你有一個圖標，需要在網頁上以多種尺寸展示，并且需要透明背景：

使用SVG格式，因為它支持透明度，且大小不會隨著尺寸變化而變化。
如果SVG不可行，選擇PNG格式，并確保圖片尺寸不大于實際需要的尺寸。

結論

圖片優化對于提高網頁加載速度至關重要。通過選擇合適的圖片格式，壓縮文件大小，調整尺寸，使用響應式圖片技術，實現延遲加載，以及利用CDN，可以確保圖片在不犧牲質量的情況下快速加載。這不僅能提升用戶體驗，還能對SEO產生積極影響。

天，是JavaScript回爐的第六十六天

上傳圖片和點擊圖片并在網頁上展示

//提交圖片使用的是jquery的ajax傳遞圖片，后端進行圖片儲存

function picture(){

let number=arguments[0].length;

let data=new FormData();

data.append('number',number)

for(let i=0;i<number;i++){

data.append("file"+i, arguments[0][i]);

}

$.ajax({

type:'POST',

url:'http://127.0.0.1:8000/index_fontsize_addimg',

dataType: "json",

data: data,

processData: false,

contentType: false,

success: function () {

alert('提交成功')

}

})

}

//點擊圖標展示輸入框

document.getElementById('input02').onclick=function(){

let arr=new Array();

document.getElementById('div01').style.display='block';

let text=document.querySelector("#textarea1");

let content;

let count=0;

let fileData;

text.addEventListener("keyup", function(e) {

content=text.value;

})

document.getElementById('input01').onchange=function() {

count+=1;

fileData=this.files[0];

arr.push(fileData)

let photo=fileData.name;

if(content==undefined){

document.getElementById('textarea1').value='['+count+'*'+photo+']';

}else{

document.getElementById('textarea1').value=content+'['+count+'*'+photo+']';

}

//點擊確定寫入數據庫

document.getElementById('input03').onclick=function(){

let name=document.getElementById('input04').value;

let photo1=document.getElementById('textarea1').value;

//圖片傳遞給函數 picture()

picture(arr)

let url='http://127.0.0.1:8000/index_fontsize_add';

data={

name:name,

content:photo1

}

//ajax的函數寫入功能

writeMysql(data,url);

}

//ajax的函數寫入功能

function writeMysql(Data,Url){

let url=Url;

let data=Data;

let ajx=new XMLHttpRequest();

ajx.open('POST',url,true);

ajx.onreadystatechange=function(){

if(ajx.readyState==4){

if(ajx.status==200){

let content=JSON.parse(ajx.responseText)['data'][0];

//獲取值傳遞給mysqlExhibition()函數

mysqlExhibition(content)

}

ajx.send(JSON.stringify(data));

}

//該函數主要是對數據庫的內容進行提煉

function mysqlExhibition(exhibition){

let str=exhibition.content

let str01=exhibition

let str1=str.replace(/\[(.+?)\]/g,'')

let str03=(str.match(/\*/g).length);

//把值傳遞給pic()函數

pic(str01,str1,str03)

}

//頁面展示函數，主要是創建圖片，這里我覺得一張博客寫入5張圖片應該可以了

function pic(exhibition,str1,str03){

let Url='http://127.0.0.1:8000/media/'

let div=document.getElementById('div03');

let p=document.createElement('p');

div.appendChild(p);

p.innerText=str1;

console.log(str03)

console.log(exhibition)

let arr=[exhibition.img0,exhibition.img1,exhibition.img2,exhibition.img3,exhibition.img4,exhibition.img5,exhibition.img6,exhibition.img7,exhibition.img8,exhibition.img9]

for(let i=0;i<str03;i++){

console.log(arr[i])

let img=document.createElement('img');

div.appendChild(img);

img.src=Url+arr[i];

img.id='img01';

}

//展示表格，博客的內容

function selectMysql(){

let AJX=new XMLHttpRequest();

let url='http://127.0.0.1:8000/index_fontsize';

AJX.open('GET',url,true);

AJX.onreadystatechange=function(){

if(AJX.readyState==4){

if(AJX.status==200){

let number=JSON.parse(AJX.responseText)['data'].length;

let content=JSON.parse(AJX.responseText)['data']

let table=document.getElementById('table01');

for(let i=0;i<number;i++){

let tr=document.createElement('tr');

let td=document.createElement('td');

let td1=document.createElement('td');

let td2=document.createElement('td');

table.appendChild(tr);

tr.appendChild(td);

tr.appendChild(td1);

tr.appendChild(td2);

td.innerText=content[i].name;

td2.innerText='查詢';

td2.style.background='blue';

}

AJX.send();

}

selectMysql();

//點擊博客查詢按鍵

document.getElementById('table01').addEventListener('click',function(e){

let data={

name:e.path[1].children[1].innerText

}

let url='http://127.0.0.1:8000/index_fontsize_select';

//傳遞給writeMysql()函數

writeMysql(data,url)

})

在線咨詢

上一篇：《photoshop教程》Photoshop制作中國
下一篇：AI 將完全取代前端開發嗎？

您的項目需求

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

整合營銷服務商