图片透明度添加半透明层

最新推荐文章于 2024-05-06 13:10:01 发布

alison liang

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量481

点赞数 2

文章标签： css

紫萱

本文链接：https://blog.csdn.net/qq_41819008/article/details/105239050

版权

1.透明图层效果图
在这里插入图片描述 2.css

div.background
{
  width: 100%;
  background: url('images/z.jpg');
  border: 1px solid red;
  height:80px;
}

div.box
{
  /* width: 100%; */
  height: 60px;
  align:center;
  text-align:center;
  margin:10px;
  background-color: #ffffff;
  border: 1px solid black;
  filter:alpha(opacity=60);
  opacity:0.4;
}

3.源代码

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<html>
<head>
<title></title>
</head>
<body topmargin="0" leftmargin="0">
<style>
div.background
{
  width: 100%;
  background: url('images/z.jpg');
  border: 1px solid red;
  height:80px;
}

div.box
{
  /* width: 100%; */
  height: 60px;
  align:center;
  text-align:center;
  margin:10px;
  background-color: #ffffff;
  border: 1px solid black;
  filter:alpha(opacity=60);
  opacity:0.4;
  
}
</style>
<div class="background">
	  <div class="box">
	  </div>
</div>
</body>
</html>

注意事项：
border框会影响显示效果，可通过将border框设置为相同的背景颜色解决。

优惠劵

alison liang

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片透明度添加半透明层

1.透明图层效果图2.cssdiv.background{ width: 100%; background: url('images/z.jpg'); border: 1px solid red; height:80px;}div.box{ /* width: 100%; */ height: 60px; align:center; text-alig...
复制链接

扫一扫