CSS：body元素選擇

我一直在使用的CSS屬性添加體內的背景圖像中更改的背景圖像不透明度爲：CSS：body元素選擇

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

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

來源

2016-11-09 Rabin Pantha

您可以發佈您的HTML代碼 – Abood

您可以在這裏查看我的代碼！ http://mumstudents.org/~985432/ –

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>

來源

2016-11-09 06:34:42 GvM

您可以使用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>

希望這有助於！

來源

2016-11-09 06:41:00

試試這個片段

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>

希望這有助於你 THANKS

來源

2016-11-09 07:00:34

CSS：body元素選擇

回答

相關問題