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框中的transperent背景所以你将适应背景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将图像添加到透明框中

2 个答案: