发表新帖
发表新帖

Changing the opacity of background image in css

后端 未结
关注
4 1294
-上瘾入骨i
-上瘾入骨i 2021-01-14 15:33

I saw some similar questions regarding this. But my approach is different and none of those works to me. That\'s why I\'m posting this. I want to change the opacity of backg

相关标签:
4条回答
  • 感情败类
    2021-01-14 16:15

    You can put the background to a separate <div>:

    <body>
    <div id="content">
        <div id="background-div"></div>
        <!-- content -->
    </div>
</body>

    Then position and style to fill the entire content.

    #content {
    positon: relative;
}

#background-div {
    position: absolute;
    width: 100%;
    height: 100%
    opacity: 0.5;
    background: url(...);
}
    0 讨论(0)
  • 梦如初夏
    2021-01-14 16:19

    You can try the following workarounds:

    1) use an image which already has an alpha channel, such as png;

    2) have the background div ad a sibling and not as a parent of the other elements, and change their position with css, such ad position:absolute; z-index; and so on.

    3) if your image only consist in colours, you can leave your html untouched and use rgba/css gradients

    0 讨论(0)
  • 一个人的身影
    2021-01-14 16:27

    HTML Background with BODY filter

    <HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)

    html, body {
  height:100%;
  padding: 0;
  margin: 0;
}

html {
  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
}

body {
  background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */
}

    Using CSS pseudo selector :before for body

    Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.

    html, body {
  height:100%;
  padding: 0;
  margin: 0;
}

body:before {
  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
  display: block; content:""; position: absolute; z-index:-1;
  top:0; left: 0; right: 0; height: 100%;
  opacity:.5;
}

    0 讨论(0)
  • 时光取名叫无心
    2021-01-14 16:32

    use direct child selector body > .backgroudimg{ blah blah }

    0 讨论(0)
 看不清?
提交回复
热议问题