如何使用 css 将图像添加到透明框

Question

所以是的伙计们，我的英语不是很好，但我想你们能理解我。我创建了一个透明框，我想给它添加一个图像，但是当我添加图像时，它也变成透明的，我该怎么办？

这是我的代码：

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"/>

Answer 1

为了保持元素的内容变为半透明，当继承 opacity 属性时，有一个技巧可以在不使图像或任何内容透明的情况下对元素应用透明度。只设置背景色为透明，像这样-

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

现在不要使用不透明度。

Answer 2

在这里你填充背景纯色但实际上你需要在 div 框中使用透明背景所以你将适用于背景 rgba() 功能那么你就可以轻松申请

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

如何使用 css 将图像添加到透明框

How to add an image to a transparent box using css

html

css

transparent