整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
片
当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：
1、内容图片
内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。
内容图片
2、布局图片
布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内容是什么意思。
布局图片
3、交互图片
图中用红色框起来的图片会给你浏览页面的时候带来一些帮助，如搜索图片，一看到就知道这里可以搜索想要的东西，购物车图片可以看到选购的产品，箭头图片点击可以看到更详细的产品等。
交互图片
在HTML中我们用 img 标签创建图片，英文是image的缩写。
<img src="" alt="">
内容图片
布局图片是在CSS中被创建出来的，使用CSS中的background属性，如：
1）background-color 定义背景颜色，设置背景图片时，要始终设置背景颜色，确保背景图片没有成功时会显示一个背景颜色
2）background-image 可以指向一个相对路径或者绝对路径来添加图片。
3）background-repeat可以设置背景是否平铺在容器中，包含四个关键字：
4）background-position 属性可以控制背景图片显示在什么位置，包含两个关键字，如：
background-position：top left 设置图片显示在容器的左上角，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right
CSS中和背景相关的属性可以简写在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是图片的颜色color，image，position，repeat，CSS属性能用简写就尽量用简写，简写比分开写性能更高。
布局图片
Web上最常用的三种图像格式
1）Jpeg 可以展示一张照片或者复杂图像
2）png最适合展示网页插画、logo和网页小图标
3）gif适合展示网页插画、logo和网页小图标
建议：
一般情况下用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片；使用CSS的background属性以背景图片的形式为网页添加用户交互图片；推荐把用户交互图片放在同一个文件中，可以提高网络和服务器性能，如：
交互图片
交互图片
具体如何操作呢？后续教头会通过视频给大家详细演示，请继续关注。
<!DOCTYPE html>
<html>
<head>
<title>html5添加音乐</title>
<meta charset="utf-8">
<!--embed标签写在<head>里面的title标签下-->
<embed src="C:\Users\Administrator\Desktop\告白气球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 说明：
1、src：文件路径。
2、hidden="true"表示隐藏音乐播放按钮，相反使用hidden="false"表示开启音乐播放按钮。
3、autostart="true" 表示是打开网页加载完后自动播放。
4、loop="true"表示 循环播放 如仅想播放一次则为：loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白气球.mp3">
</audio>
<!-- 说明：
1、autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。
2、controls="controls"，则为了在页面内显示显示控件，如播放按钮。
3、"loop="loop"，则是为了使背景音乐重复播放。
4、preload="auto"，则音频在页面加载的同时进行加载，并预备播放。
5、src=""，即是在""内加入背景音乐的保存路径，如：src=""。
注：若是想播放按钮隐藏，则使用以下语句：
直接使用css 的display控制audio标签的显示： -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>这样一个需求，就是在一个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>这种方式比较适合那种需要给背景图片上添加蒙版的情况，但是笔者尝试的时候，结果实在是不尽人意。所以还是选择了上面的推荐方法，不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。
<!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>这种方式实现会影响到整个的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内部有内容的情况下会影响到整个组件体系的样式。
在实际开发中，我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式，有兴趣的读者可以留言我们一起讨论。
*请认真填写需求信息，我们会在24小时内与您取得联系。
