如何使用css將圖像添加到透明框中

所以是的，我的英語不是很好，但我認爲你能理解我。我創建了一個透明盒子，我想向它添加一個圖像，但是當我添加圖像時，它也變得透明，我該怎麼辦？如何使用css將圖像添加到透明框中

這是我的代碼：

html { 
 
    background: url(Untitled-4.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
body { 
 
text-align: center; 
 
} 
 
#main { 
 
width: 700; 
 
height: 400; 
 
background:#FFFFFF; 
 
margin: 25px auto; 
 
border: solid 5px #191919 
 
display:  inline-block; 
 
padding:  8px 20px; 
 
background: #073763 url repeat-x; 
 
border-radius: 5px; 
 
color:   #fff; 
 
font:   normal 700 24px/1 "Calibri", sans-serif; 
 
text-align: center; 
 
text-shadow: 1px 1px 0 #000; 
 
opacity: 0.5;

<html> 
 
<head> 
 
<title>Dragon Kova Z: Fryzo prisikėlimas </title> 
 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
 
<link href="style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 
</html> 
 
<body> 
 
<img src="filmo info.gif" alt="Mountain View" 
 
<div id="main"> 
 
<embed src="FLOW - HERO -Kibou no uta-.mp3" 
 
width="0" height="0" 
 
autostart="false" 
 
name="mysound" 
 
enablejavascript="true"/>

來源

2015-08-08 BananaFlow

要保留繼承opacity屬性時元素去半透明的內容，也適用透明度你的元素沒有一招使圖像或任何內容透明。只設置背景顏色爲透明，像這樣 -

#main { 
    background-color: rgba(255,255,255,0.5); 
}

現在不使用不透明度。

來源

2015-08-08 11:10:22

OMG，感謝ü非常老兄你幫了我;） – BananaFlow

是啊，已經做到了:) – BananaFlow

在這裏，您填充背景堅實，但實際你需要在div框透明單位的背景，所以你會APLY背景RGBA（）函數那麼你可以easilly申請

<html> 
<head> 
<title>Dragon Kova Z: Fryzo prisikėlimas </title> 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
<link href="style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <img src="filmo info.gif" alt="Mountain View"/> 
<div id="main"> 
    <embed src="FLOW - HERO -Kibou no uta-.mp3" 
width="0" height="0" 
autostart="false" 
name="mysound" 
enablejavascript="true"/> 

    Hello 
    Hows you ?<br> 
    Fine.... :) 
</body> 

html { 
    background: url(Untitled-4.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
body { 
text-align: center; 
} 
#main { 
width: 700; 
height: 400; 
background:rgba(10,12,200,0.2); 
margin: 25px auto; 
border: solid 5px #191919 
display:  inline-block; 
padding:  8px 20px; 
background: #073763 url repeat-x; 
border-radius: 5px; 
color:   #fff; 
font:   normal 700 24px/1 "Calibri", sans-serif; 
text-align: center; 
text-shadow: 1px 1px 0 #000; 
}

來源

2015-08-08 11:31:42

如何使用css將圖像添加到透明框中

回答

相關問題