CSS: Change opacity of background-image within the body element selector
Question
I have added a background image inside body using css property as:
body{
background-image: url('background-img.jpg');
}
Now what I want to do is add opacity property to this background image. Can we do this without using z-index property (ie. by separating div containing background image and contents)? If it was within a image tag I could have used opacity : value property inside css selector but its not the case. Any css tricks or solutions will be appreciated!!
3 answers
solution1
3 2016-11-09 06:41:00
You can use background gradient with rgba() and url() property together.
Just like:
background: linear-gradient(rgba(244, 67, 54, 0.95),
rgba(33, 150, 243, 0.75),
rgba(139, 195, 74, 0.75),
rgba(255, 87, 34, 0.95)),
url("http://placehold.it/200x200");
Look at the snippet below:
body { width: 100%; height: 100%; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("http://lorempixel.com/400/200"); }
<body>This is some text</body>
Hope this helps!
solution2
2 2016-11-09 06:34:42
div { background: url(http://placehold.it/300x300); background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(http://placehold.it/300x300); height: 300px; width: 300px; background-repeat: no-repeat; background-size: cover; }
<div><div>
solution3
2 2016-11-09 07:00:34
Try this Snippet
body{ height:430px; width:430px; } body::after { content: ""; background: url("https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); background-repeat:no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
<body> <h1>Hello world </h1> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.