<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:;
border:2px red solid;
position:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div id="div1"></div>
以上是部分代码...怎么在<div></div>这个块状元素中添加半透明图片
2016-11-09
1. 使用半透明的图片配置为div的背景图片
2. #div1添加修饰（缺点是整个div的文字也存在半透明情况）：
background: url(./1.png) no-repeat;
opacity: 0.5;
3、添加一个子div块，宽度与高度与#div1保持一致，并为其第一子元素（且位于文字内容之前）
<div id="div1">
<div class="div2">
</div>
<div class="">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
#div1 {
width: 200px;
height: 200px;
border: 2px red solid;
position: fixed;
top: 0;
left: 0;
}
.div2 {
background: url(./1.png) no-repeat;
opacity: 0.5;
width: 200px;
height: 200px;
position: fixed;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:;
border:2px red solid;
position:fixed;
bottom:0;
right:0;
background-size:100%;
}
img{
width: auto;/*适应盒子的大小*/
height:auto;/*适应盒子的大小*/
max-height: 100%;/*适应盒子的大小*/
max-width: 100%;/*适应盒子的大小*/
opacity:0.5;/*浏览器支持所有浏览器都支持 opacity 属性。注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/
}
</style>
</head>
<body>
<div id="div1">
<img src="tupian.png">
</div>
</body>
如果想在图片上在放一个图片的话直接定位就OK了
举报
