Question

我正在尝试将<div>的透明度设置为仅影响背景颜色，但每次执行此操作时，最终都会使整个<div>透明。这是我的css，也是一个演示的小提琴：

html {
        background-image: url("https://dl.dropboxusercontent.com/u/47991825/8856597-daisies-green-background.jpg");
    }
    .profilePic {
        width: 128px;
        height: 128px;
        border-radius: 64px;
        -webkit-border-radius: 64px;
        -moz-border-radius: 64px;
    }
    h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
    }
    #mainCont {
        width: 250px;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        padding: 15px;
        border: 1px solid #000000;
        height: 40%;
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 12pt;
        background-color: #000000;
        opacity: 0.4;
    }
    #footer {
        position: absolute;
        bottom: 0;
        height: 40px;
        margin-top: 40px;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    a:link {
        text-decoration: none;
    }

http://jsfiddle.net/joshrlangley/ne2o1r5x/1/

Answer 1

（背景）颜色具有rgba(r, g, b, opacity)格式。

#mainCont {
    // 0, 0, 0 = black
    // 255, 255, 255 = white
    background-color: rgba(0, 0, 0, 0.4);
}

http://jsfiddle.net/rudiedirkx/ne2o1r5x/2/

背景图片但遗憾的是仍然没有不透明度选项。

Answer 2

您也可以使用rgba()函数，而不是使用十六进制颜色格式，它看起来像这样：

rgba(0, 0, 0, 0.4)

这些论点是这样的：

rgba(r, g, b, opacity)

希望这有所帮助，祝你好运！

CSS背景颜色透明度

2 个答案: