整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这样一个需求，就是在一个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内部有内容的情况下会影响到整个组件体系的样式。
在实际开发中，我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式，有兴趣的读者可以留言我们一起讨论。
html页面，显示的内容太多，会影响用户体验，如果有一些，点击才出现的内容，就可以减少内容的干扰。使用jquery就可以很快的实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div隐藏测试</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<button id="controller">隐藏或者显示</button>
<div id="contents" style="display: none;">
<p>div的内容</p>
</div>
<script>
$("#controller").click(function () {
if ($("#contents").is(":hidden")) {
$("#contents").show()
} else {
$("#contents").hide()
}
})
</script>
</body>
</html>
$("#contents").is(":hidden") 可以判断是否是隐藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的属性
$("#contents").attr("style","display:none;"); //隐藏div
$("#contents").attr("style","display:block;"); //显示div
也可以操作css属性
$("#contents").css("display","none"); //隐藏div
$("#contents").css("display","block"); //显示div
也可以直接使用toggle转换开关实现
$("#contents").toggle()
一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。
本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文说的一样，最简单也最粗暴的方法就是设置元素的display属性为none;
display:none;
设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。
另外一种方法是设置元素的visibility属性为hidden。
visibility: hidden
这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。
如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。
设置元素透明度opacity属性为0，也可以隐藏页面元素。
opacity:0
在呈现上与visibility:hidden;方式一样，同样会占据页面空间。
对页面布局的影响主要是看是否会引起浏览器的重汇和重排，对应的差异如下图所示。
页面布局差异
display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
visibility: hidden;的元素不会触发绑定的事件。
opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。
我们可以通过以下的例子来看看。
首先我们定义两个div，分别设置为visibility: hidden;和opacity:0，在两个div上分别绑定一个click事件。
定义div元素
绑定的事件
当我们在两个元素都进行点击时，可以在控制台看到如下输出结果。
结果
从上述结果可以看出和上述结论一致。
display:none;的元素会直接从页面消失，因此定义transition效果完全无效。
visibility:hidden;的元素会在transition设置的时间内消失，但是没有动画效果。
opacity:0;的元素可以和正常元素一样，从页面以动画效果消失。
同样我们可以通过以下这个例子来看看。
首先，我们定义两个div，并设置其transition属性。
div元素
定义transition效果
我们通过将鼠标移至元素上，可以看到两者的差异，从而验证了上述结论的正确性。
本篇文章主要讲解了使用CSS隐藏元素的几种常用方法，并讲解了它们之间的区别，以便大家在特定的场景中进行选择。
*请认真填写需求信息，我们会在24小时内与您取得联系。
