怎么给这个红框内添加半透明的背景图片？求解

源自：13-8 我就在那不动了-层模型之固定定位

怎么给这个红框内添加半透明的背景图片？求解

<!DOCTYPE HTML>

<html>

<head>

<title>relative样式</title>

#div1{

width:200px;

height:200px;

background:;

border:2px red solid;

position:fixed;

bottom:0;

right:0;

}

</style>

</head>

<body>

以上是部分代码...怎么在<div></div>这个块状元素中添加半透明图片

提问者：qq_固守本心_04333638 2016-11-09 11:06

个回答

慕粉3773137

2016-11-09 14:42:18

已采纳

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;
}

0
qq_固守本心_04333638

2016-11-09 14:50:54

问题解决！灰常感谢

0
慕数据6964081

2016-11-09 12:04:18

1.在.btm{}里添加margin：0；2.在#div1｛｝中添加padding;0;3.btm{}里添加align：justify; 回复发不出去。。。

0
qq_天启海轮_03846470

2016-11-09 12:03:48

#test{width:320px;height:320px;background:url(背景地址);opacity:0.7;filter:alpha(opacity=70)

0
qq_天启海轮_03846470

2016-11-09 11:59:13

<!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了

1
慕数据6964081

2016-11-09 11:32:25

<div id="div1">
<img class=btm src="............................." alt="半透明图片">
</div>
在<style type="text/css">
.btm{opacity:80%;}
</style>

0
慕粉4371339

2016-11-09 11:23:46

百度喽

0