Как добавить изображение в прозрачный ящик с помощью 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

Здесь вы заполнить фон внушительным, но фактический вам нужен прозрачный фон в поле сНа так что вы будете 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

ответ

Смежные вопросы