设置不透明度只背景图片

我已经看过这个帖子里面介绍了如何设置只母的背景图像的不透明度的明确说明，而不会影响孩子的元素RGBA（）：HTML/CSS text background transparent but text not 设置不透明度只背景图片

但是，我该怎么办设置背景图像以及不透明度？本来，我用不透明像这样（但孩子的元素过于影响）：

.content { 
    background-image: url('link/url/image.jpeg'); 
    opacity: 0.35; 
}

但看SO后上面链接后，我尝试这样做：

.content { 
    background-image: url('link/url/image.jpeg'); 
    background: rgba(255, 255, 255, 0.35); 
}

但它似乎像背景rgba（）值没有做任何事情。我也试过：

.content { 
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg'); 
}

但是后来没有显示背景。

来源

2016-11-08 patrickhuang94

根据浏览器的要求，你可以看看丹尼尔在这篇文章中的答案：http://stackoverflow.com/questions/10422949/css-background-opacity – JanR

你不能应用不透明度：0;对其子女？ –

@ AllDani.com我认为这会起作用，但在孩子身上设置“不透明度：0”不会影响它。 – patrickhuang94

尝试了这一点：

.content::after { 
    content: ""; 
    background: url('link/url/image.jpeg'); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

来源

2016-11-08 03:42:17 Derek

在你的情况下，背景颜色不能被看到，因为图像那张颜色，如果它不是透明不显示它。

目前还没有一个属性只能为背景图像指定透明度。

如果您希望透明背景图像在悬停时没有任何效果或过渡，则可以直接使用.png格式的图像并用透明度保存。

否则，您将需要在“位置：相对”和“溢出：隐藏”中使用内部图像和另一个容器在“position：absolute”中使用文本或其他内容创建容器。通过这种方式，您只能将透明度分配给图像，而不会影响其余部分。

来源

2016-11-08 03:53:17 Sieen

你能详细说说你的最后一段吗？不是真的跟着你。 – patrickhuang94

设置不透明度只背景图片

回答

相关问题