㈠ Css實現背景圖片半透明效果。
你的圖片跟第二個層在同一個層里,第二個層又是相對定位,當然不行了。
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>
<div width="1024" height="768">
<img src="C:\\webstudy\\Pic\\2.jpg" class="alpha"/>
</div>
<div style=" position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
或者:
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>
<div style="position:relative" width="1024" height="768">
<img src="My Pictures/q-1.jpg" class="alpha"/>
<div style="position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
</div>
㈡ css實現層的隱現問題!關於背景色變半透明
這個背景要用js來寫,因為如果用css,會存在瀏覽器兼容性的問題,和瀏覽器放大與縮小的問題。
拖動的話,這方面的代碼就太多了。
㈢ CSS如何定義DIV背景半透明顏色
「長城郭靖」回答的是錯的,他答的是讓整個元素半透明
只讓背景半透明只有一個辦法,就是用rgba顏色,代碼如下
background:rgba(0,0,0,0.5)
解釋:這是黑色半透明的代碼
前三個值表示顏色的red,green,blue值
最後一個表示alpha值,就是透明度值,不透明為1
(支持IE8+以及所有現代瀏覽器)
還是不懂的話,可以參考 網路 「rgba」詞條 和 「CSS 顏色值」詞條
㈣ 怎麼用css給網頁背景設置成半透明的
用rgba設置顏色,前三個參數是rgb的值,最後一個參數是透明度
㈤ div設置背景半透明
#a{
background:#FFCC33;
filter:alpha(opacity=50);/*支持IE瀏覽器*/
-moz-opacity:0.50;/*支持FireFox瀏覽器*/
opacity:0.50;/*支持Chrome,Opera,Safari等瀏覽器*/
width:300px;
height:300px;
}
還有一種僅讓背景半透明,裡面內容不會透明
#a{
background:rgba(255,204,51,0.5);
width:300px;
height:300px;
}
前三個值表示顏色的red,green,blue值
最後一個表示alpha值,就是透明度值,不透明為1
㈥ 關於CSS里背景半透明
圖片實現半透明同時兼容各大瀏覽器比較復雜。
思路是現在主流瀏覽器處ie6外都支持png格式,
而Ie6下用微軟的濾鏡效果實現半透明,方法是在對應class中加:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的圖片.png', sizingMethod='scale');
同時用css鉤子對瀏覽器進行區分。
可以在網路搜:ie6半透明
另外要的效果也有另一種思路:
用兩個div分別裝內容和背景,並讓兩個div重疊,裝內容的div北京為空。背景層則可以用半透明css。
㈦ div+css如何實現背景半透明內容不透明
css濾鏡只對IE有效,也夠了
放個半透明的圖片做背景不就可以了
是不背景要在字上面,主相對蓋的絕對,用z-index試下。
㈧ css如何讓層背景顏色半透明
{
filter: Alpha(Opacity=50) /* for IE */
background-color: rgba(0, 0, 0, 0.5); /*for FF*/
}
㈨ 可以用CSS直接寫出把背景弄成半透明的效果嗎
<html>
<head>
<title>怎樣使圖片半透明</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style type="TEXT/CSS">.cool {
BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-WIDTH: 1px; CURSOR: hand; FONT-SIZE: 9pt
}
A {
TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: underline
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
TH {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
BODY {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
.tm {
FILTER: Alpha(Opacity=50)
}
.style2 {
FILTER: Alpha(Style=2)
}
.style1 {
FILTER: Alpha( Style=1, StartX=30, StartY=20,FinishX=15,FinishY=5)
}
</style>
<meta content="Microsoft FrontPage 6.0" name="GENERATOR">
</head>
<body bgColor="#ffffff" link="#6699FF" vLink="#6699CC">
<center>
<table cellPadding="0" cellSpacing="0" width="484">
<TBODY>
<tr vAlign="top">
<td width="490"><table cellPadding="0" cellSpacing="0" width="100%">
<TBODY>
<tr>
<td vAlign="top" width="397">
<div
id="Layer1" style="HEIGHT: 31px; LEFT: 138px; POSITION: absolute; TOP: 166px; WIDTH: 14px">
<dd>
<img class="tm" src="images/girl.gif" width="32" height="32"></dd>
</div>
<script>
//這是使圖層移動的函數
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft+10;
Layer1.style.top=event.clientY+document.body.scrollTop+10;
}
//這里的意思是,如果滑鼠移動時就調用"move_layer"函數
document.onmousemove =move_layer;
</script>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
<tr>
<td vAlign="top" width="490">
<table cellPadding="0" cellSpacing="0" width="392">
<TBODY>
<tr>
<td height="1" vAlign="top" width="3"></td>
<td vAlign="top" width="11"></td>
<td height="22" vAlign="top" width="487">
<table cellPadding="0" cellSpacing="0" class="hs"
width="487" height="269">
<TBODY>
<tr align="middle">
<td height="33" colspan="3" width="485" valign="bottom">
<p align="center"><font size="2" color="#FF0000">怎樣使圖片半透明</font></p>
</td>
</tr>
<tr vAlign="top">
<td width="185" height="236"><span style="font-size:10.5pt;mso-bidi-font-size:10.0pt;
font-family:宋體;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:
"Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt;
mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA"> </span>
<span style="mso-bidi-font-size:10.0pt;
font-family:宋體;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:
"Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt;
mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA">
經常在網上見到半透明的圖片吧!圖片不會遮擋住後面的文字,想知道怎麼做的嗎,很簡單,</span><span style="mso-bidi-font-size:10.0pt;font-family:宋體;mso-hansi-font-family:
"Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt;
mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA">這就是<span lang="EN-US">CSS樣式表單濾鏡Alpha的<span style="color:black">強大功能,</span>僅用短短的幾行代碼,就實現了以上效果,</span></span>你應該看到了一個半透明的圖片吧! <br>
用的圖片是這張:<img align="top" height="32" src="images/girl.gif" width="32"><br>
為了更加清楚的看到效果。我們讓圖片跟隨滑鼠! 產生半透明效果的方法用了CSS樣式!<br>
</td>
<td width="68" height="236">
</td>
<td width="228" height="236">第一種效果:<font color="#006666">Alpha( Style=1, StartX=30, StartY=20, FinishX=15,
FinishY=5)</font><br>
<img alt="返回首頁!" border="0" class="style1" height="69" src="images/PHOT046.JPG"
width="206"><br>
<br>
第二種的效果.<font color="#006666">Alpha(Style=2)</font> <br>
<img alt="返回首頁!" border="0" class="style2" height="65" src="images/PHOT046.JPG"
width="206"><br>
其他參數自己試試吧!<br>
<br>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
<tr align="right">
<td width="490"></td>
</tr>
</table>
<p align="center"> </p>
</center>
</body>
</html>
或者
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用CSS控制透明圖片</title>
</head>
<body>
<style>
body{ font-size:12px;}
#top{position:absolute;}
#top a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
#top a:hover{font-size:9px;}
#top a:hover img{-moz-opacity:0.5; filter:alpha(opacity=80);cursor:hand;}
</style>
<div>
<div id="top"><a href="http://www.jscode.cn" target="_blank"><img src="http://www.jscode.cn/Uploadfile/200682495750348.JPG" /></a></div>
這里是一些文字</div>
</body>
</html>
㈩ css黑色透明背景,怎麼做成這種半透明的背景求代碼,急急急!!!
<!doctypehtml>
<html>
<head>
<title>test</title>
<styletype="text/css">
.layer{
background:#000;
opacity:0.42;/*透明度設置樣式*/
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
}
.container{
position:relative;
width:100%;
height:100%;
color:green;
font-size:48px;
z-index:0;
}
.pop{
position:relative;
margin:auto;
z-index:2;
width:400px;
height:200px;
background:#fff;
color:red;
}
</style>
</head>
<body>
<divclass="container">
<divclass="layer">
thisislayer
</div>
<divclass="pop">
thisispop
</div>
</div>
</body>
</html>