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

标签 html css transparent

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

这是我的代码:

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

最佳答案

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

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

现在不要使用不透明度。

关于html - 如何使用css将图像添加到透明框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31892419/

相关文章:

javascript - 使用 jquery 查找与可点击元素同一行的文本框的值

jQuery 检查内联样式

javascript - Jquery和PHP,自动完成

jquery - 找到特定的 td 背景颜色

C#窗口窗体的透明背景

html - 寻求一种紧凑格式的 HTML 电子书,以便在 Linux 下离线阅读

jquery - 如何让 Fancybox Next 和 Previous 按钮保持可见

javascript - Vanilla JS 选择器有助于从一组单选按钮添加值

android - PNG透明像素是否占用内存?

html - 翻转图像下方有不需要的灰色条