background image with overlay css

前端未结

关注

 4  939

刺人心

How I design background image with overlay in CSS like this example image.

here the code. i want to add tour class to background image and overlay effect. <

相关标签:

4条回答

暗喜

2021-01-28 10:39

you should have added more information in to the question, but Is this what you want?

CSS for this:

.background {
  background:url('BackgroundImage.png');
}

.layer {
  background-color: rgba(248, 247, 216, 0.7)
  width: 100%;
  height: 100%;
}

HTML for this:

<div class="background">
  <div class="layer">
  </div>

Hope it helps :)

0 讨论(0)

我在风中等你

2021-01-28 10:43

Try Below Code

HTML

<div class="img-wrapper">
    <img src=".." />
</div>

Style

.img-wrapper {
    position: relative;
}
.img-wrapper:after {
    content: "";
    background-color: rgba(37,131,173,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

0 讨论(0)

长发绾君心

2021-01-28 10:57

It goes something like this:

<style>
    .div-image{
        height: 200px;
        width: 400px;
        background-image: url(demo.jpg);
        background-repeat: no-repeat;
    }
    .overlay{
        height: 200px;
        width: 400px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 255,0.5);
    }
</style>

<body>
    <div class="div-image"></div>
    <div class="overlay"></div>
</body>

0 讨论(0)

终归单人心

2021-01-28 11:01

you can use this code

HTML

<div id="wrapper">
    <img src="image-file" alt="">
    <div class="overlay"></div>
</div>

CSS

#wrapper {
    position: relative;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}

0 讨论(0)