使 div 元素背景对背景图像透明 CSS

Question

我想在我的网站中制作视差效果，但是我无法将 DIV 元素的背景设置为透明，尽管使用 background-color: transparent.

基本上，我只想在 DIV 中显示文本，并删除背景颜色。

通过使用 W3School..

    body, html {
        height: 100%;
    }
    
    .parallax {
        /* The image used */
        background-image: url('http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg');
    
        /* Full height */
        height: 100%; 
    
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .parallax2 {
        /* The image used */
        background-image: url('http://www.qygjxz.com/data/out/114/4676052-image.png');
    
        /* Full height */
        height: 100%; 
    
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
    @media only screen and (max-device-width: 1024px) {
        .parallax {
            background-attachment: scroll;
        }
    }>

    
    <div class="parallax"></div>
    
    <div style="height:100px;background-color:transparent;font-size:36px">
    Some text goes here, need to try to make the background of this transparent? Any ideas?
    </div>
    
    <div class="parallax2"></div>

谢谢

Answer 1

如果您不为 div 指定背景颜色，它将自动透明。这是默认设置。我做了一个 jsfiddle 并测试它以确保。

<div style="height:100px;font-size:36px; border:1px solid red;">
    Some text goes here, need to try to make the background of this transparent? Any ideas?
    </div>

如果由于某种原因它不起作用，我会在 Photoshop 中制作一个 2*2 透明的 PNG 并指定为背景色，在 x 和 y 方向重复。

这不是标准解决方案，但一定会奏效。 :D

Answer 2

如果你想将背景颜色设置为透明，你可以做所有这些。

background-color: ; background-color: transparent; background-color: rgba(0, 0, 0, 0);

但在这种情况下，您需要设置一个不同的位置，这里是代码我希望这就是您要找的内容

<div style="height:100px;font-size:36px; border:1px solid red; position: absolute;">
  Some text goes here, need to try to make the background of this transparent? Any ideas?
</div>

Answer 3

几天前我遇到了类似的问题。你可以很容易地写：

background: none;

或

background: transparent;

然后该元素变为透明，其下的元素将可见。但是文字还在。

使 div 元素背景对背景图像透明 CSS

Making div element background transparent to background image CSS

html

css

web

transparent