CSS：在body元素選擇器中更改background-image的不透明度

Question

我使用css屬性在body中添加了一個背景圖像：

  body{
   background-image: url('background-img.jpg');
  }

現在我想要做的是為此背景圖像添加不透明度屬性。 我們可以不使用z-index屬性（即通過分離包含背景圖像和內容的div）來做到這一點嗎？ 如果它在圖像標記內，我可以在css選擇器中使用opacity：value屬性，但事實並非如此。 任何CSS技巧或解決方案將不勝感激！

Answer 1

您可以將background漸變與rgba()和url()屬性一起使用。

就像：

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");

看下面的代碼：

 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>

希望這可以幫助！

Answer 2

 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>

Answer 3

試試這個片段

 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>

希望這能幫到你感謝

CSS：在body元素選擇器中更改background-image的不透明度

問題描述

3 個解決方案

解決方案1
3 2016-11-09 06:41:00

解決方案2
2 2016-11-09 06:34:42

解決方案3
2 2016-11-09 07:00:34

CSS：在body元素選擇器中更改background-image的不透明度

問題描述

3 個解決方案

解決方案1 3 2016-11-09 06:41:00

解決方案2 2 2016-11-09 06:34:42

解決方案3 2 2016-11-09 07:00:34

解決方案1
3 2016-11-09 06:41:00

解決方案2
2 2016-11-09 06:34:42

解決方案3
2 2016-11-09 07:00:34