在html頁面中設置透明背景

Question

我需要的是解決我問題的建議或想法，我想要做的是設置一個透明的背景，例如WordPress的“二十一”主題：

透明背景

我剛剛發現，用HTML / CSS <html> vs <body>在html標簽中設置 CSS 設置網頁的背景圖像不是一種好習慣，但是在我的示例中我只是在嘗試

的HTML

<html>
<head><title>Opacity</title><link rel="stylesheet" href="style.css"></head>
<body>
This is a Test
</body>
</html>

的CSS

html{
    width:100%
    background-color:rgb(0,0,0,0.1); /*red green blue opacity */
}

body{
    max-width:300px;
    /* min-width:500px; */
    background-color: RED;
}

問題是，盡管我試圖在CSS中設置寬度以及主體的最大寬度，但我還是得到了一個完整的紅頁。 有任何想法嗎？

Answer 1

試試這個-http://jsfiddle.net/utwkfonx/1/

的HTML

<html>

    <head>
        <title>Opacity</title>
    </head>

    <body>
        <div id="wrapper">This is a Test</div>
    </body>

</html>

的CSS

html {
    width:100% background-color:rgb(0, 0, 0, 0.1);
    /*red green blue opacity */
}
body {
    background-color: RED;
}
#wrapper {
    font-size: 20px;
    max-width: 300px;
    background: #fff;
    margin: 0 auto;
    padding: 10px;
}

Answer 2

您的問題是身體的高度為0。

嘗試這個：

html{
    width:100%;
    background: rgba(200,0,0,0.1);
    min-height: 100%;
}

body{
    background:green;
    width: 40%;
    min-height: 100%;
}

在這里查看： JSFiddle

在html頁面中設置透明背景

問題描述

2 個解決方案

解決方案1
1 2014-10-18 14:12:55

解決方案2
1 已采納 2014-10-18 14:13:03

在html頁面中設置透明背景

問題描述

2 個解決方案

解決方案1 1 2014-10-18 14:12:55

解決方案2 1 已采納 2014-10-18 14:13:03

解決方案1
1 2014-10-18 14:12:55

解決方案2
1 已采納 2014-10-18 14:13:03