Can I set background image and opacity in the same property?

后端 未结 14 2137
南笙
南笙 2020-11-22 07:58

I can see in CSS references how to set image transparency and how to set a background image. But how can I combine these two in order to set a transparent background image?<

14条回答
  •  刺人心
    刺人心 (楼主)
    2020-11-22 08:34

    I saw this and in CSS3 you can now place code in like this. Lets say I want it to cover the whole background I would do something like this. Then with hsla(0,0%,100%,0.70) or rgba you use a white background with whatever percentage saturation or opacity to get the look you desire.

    .body{
        background-attachment: fixed;
        background-image: url(../images/Store1.jpeg);
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: hsla(0,0%,100%,0.70);
        background-blend-mode: overlay;
        background-repeat: no-repeat;
    }
    

提交回复
热议问题