2

コンテナの背景に透明なボックスを作成しようとしていますが、背景の中央に作成できません。代わりに、トップマージンを使用してデザインを実現しようとすると、移動します。背景画像も下にあるので、 http：//www.w3schools.com/Css/tryit.asp？ filename= trycss_transparencyのW3Cの例のようにできない理由をお聞きしたいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
    <title>
        Portal
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
    <div id="header">
        <img src="images/logo.gif" id="logo" alt="Logo"/>
        <a href="http://www.google.com">
            <img src="images/a.png" id="logo2" align="right" alt="logo"/>
        </a>
    </div> 
    <div id="container">
        <div id="function"></div>
        <div id="Display"></div>
        <div id="View"></div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

CSSファイルは次のとおりです。

body{
font-size:100%;
margin: 0em 9em 0em 9em;
}

#header{
width:55em;
height:2.375em;
background:black;
border: 0em 0em 0em 0em;
}

#logo{
padding: 0em 0em 0em 2em;
}

#logo2{
width:3.618em;
height:2.3em;
margin: 0.1em 0.25em 0.1em 0em;
}

#container{
width:55em;
height: 36.25em;
background-image:url("images/background1.jpg");
margin: 0.25em 0em 0em 0em;
}

#function{
width:35em;
height:32.625em;
margin: 2em 10em;
background-color: #ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}

#footer{
font-family:"Times New Roman";
width:62em;
font-size:0.75em;
color:grey;
border-top-style:solid;
border-color:grey;
border-width:0.25em;
margin: 0.25em 0em 0em 5em;
}
4

2 に答える 2

8

これを行うにはいくつかの方法があります。次を使用できます。

不透明度：

style {
    opacity: 0.5;
    filter: alpha(opacity=50); // For IE
    -moz-opacity:0.5; // For Firefox < 5.0
}

RGBAカラー：

style {
    background: rgba(0, 0, 0, 0.5); // The last item is the opacity
}

画像：

style {
    background: url('image/transparent_img.png') repeat top left;
}

RGBAは最も優れた方法ですが、古いIEバージョンではサポートされていません。不透明度はそれほどサポートされていません（IEも同様です）。フォールバックとしてrga（）を使用できますが、個人的には、今のところ、透明な画像が最善のxブラウザーの賭けだと思います。

編集：私が質問を誤解しているのを見て、あなたはただ#containerにパディングを追加したいと思います。

于 2012-07-12T09:19:06.877 に答える
3

正しく動作しますが、ポジショニングが間違っています。

divには、背景のあるbackground: blackdivが含まれていません。transparentHTMLで変更する必要があります。また、CSSに追加background: black;すると動作するのを見ることができます。body

于 2012-07-12T09:17:52.567 に答える