如何在不更改div内容的情况下更改背景图像的不透明度? [英] How can i change background image opacity without changing on div content?

问题描述

我想知道如何在不更改div内容的情况下更改背景图像的不透明度?"

I want know that "How can i change background image opacity without changing on div content?"

我搜索了太多&我找不到解决此问题的好方法！

I searched too much & I don't find a good answer to solve this issue!

HTML

<div class="div-1">
    <h2>title</h2>
    <p>text</p></div>

CSS

.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}

推荐答案

由于元素的所有子元素均受其CSS的影响，因此不能简单地设置背景图像的不透明度，但是，有几种解决方法:

Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:

您不必在事后设置背景图像的不透明度，而只需在您喜欢的图像编辑器中使背景图像透明即可.(尝试gimp，它是免费的！)，并将其另存为具有透明性的图像(如PNG).

Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).

如果使父元素具有相对位置并在其中绝对定位子元素，则将其从流程中移出，它们将不受父元素的不透明度的影响. [来源]

If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]

如果您将内容与父项分离，并使这两个元素成为同级，则可以使用z-indexing将属于子项的元素放置在父项上，并设置父项的不透明度而不影响子项.

If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.

还有更多，但是其中之一应该可以满足您的需求.

There are more, but one of those should get you what you want.

这篇关于如何在不更改div内容的情况下更改背景图像的不透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！