可扩展的不透明度框HTML

时间:2016-03-01 12:48:30

标签: html css

我遇到了问题但找不到答案。 我们有Div1渐变。它投入了另一张DIV2照片。它投资了контент3部分。 设置div2(图像)的不透明度,更改嵌套在其中的内容的透明度。 我有一张照片要做一个透明的png,因为这大大增加了图片的重量,这是不可接受的。需要返回版本图像到JPG。 如何使用JPG并保存这个DIV结构,以实现透明JPG,但不影响其中嵌入的内容。

我不喜欢这里的例子(第一部分有背景) - Mobileindex.ru

这里我们使用透明图片

http://codepen.io/anon/pen/NNPLwX

如何仅使用JPG图片做同样的事情 http://www.mobileindex.ru/images/background-mobileindex.ru.jpg - 没有透明度

重点 - DIV.parallax1内的内容必须扩展整个块高

    .parallax-1 {

        width: 100%;
        top: 0px;
        background: url(http://www.mobileindex.ru/images/Background-800-transp-mobileindex.ru.png) 50% 0 no-repeat fixed;
        background-size: cover;
        height: inherit;
        padding: 0;
        opacity: 1;
        z-index: 2;
    }
    .gradient1 {


        height: 100vh auto;
        background: #6e72b6;
        background: -moz-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
        background: -webkit-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
        background: linear-gradient(to bottom, #6e72b6 0%, #6d9594 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6e72b6', endColorstr='#6d9594', GradientType=0);
    }
    p {
        height: 100vh;
    }
<div class="gradient1">
<div class="parallax-1">
    <p>bootstrap grid and contenr</p>
</div>
</div>

0 个答案:

没有答案