怎么給這個紅框內添加半透明的背景圖片?求解
<!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;
? ? }
2016-11-09
問題解決!灰常感謝
2016-11-09
1.在.btm{}里添加margin:0;2.在#div1{}中添加padding;0;3.btm{}里添加align:justify; 回復發(fā)不出去。。。
2016-11-09
#test{width:320px;height:320px;background:url(背景地址);opacity:0.7;filter:alpha(opacity=70)
2016-11-09
<!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了
2016-11-09
<div id="div1">
????<img class=btm src="............................." alt="半透明圖片">
</div>
在<style type="text/css">?
.btm{opacity:80%;}
</style>
2016-11-09
百度嘍