整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML如何设置div背景图片的的透明度

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像素的尺寸展示，那么：

  1. 使用图像编辑工具将尺寸调整为800x600像素。
  2. 选择JPEG格式，并设置合适的压缩比例，比如70%的质量。
  3. 使用TinyJPG等在线工具进一步压缩处理。
  4. TinyJPG – Compress WebP, PNG and JPEG images intelligently

优化后的图片可能只有100KB左右，大大减少了加载时间。

示例2：优化图标

如果你有一个图标，需要在网页上以多种尺寸展示，并且需要透明背景：

  1. 使用SVG格式，因为它支持透明度，且大小不会随着尺寸变化而变化。
  2. 如果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小时内与您取得联系。

推荐阅读
友情链接 平邑县 韩城市 临邑县 泗县 加查县 布尔津县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服