Question

我想在我的网页上对背景图片应用不透明度。

我如何实现这一目标？我只想把它放在图像区域。

这是我的JSFiddle。

HTML：

<header class="main-header " style="background-image:url('http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg');">

        <div class="sticky-header">
            <div class="row">
                <nav class="medium-10 columns primary menu">
                    <ul class="inline naked">
                        <li><a href="">test</a></li>
                    </ul>
                </nav>
            </div>
        </div>

CSS：

.sticky-header {
padding-top: 30px;
width: 100%;
margin: 0 auto;
position: fixed;
z-index: 1000;
background-color: #ffffff;
background-size: auto 100%;
border-bottom: 5px solid #f2f2f2;
top: 0;
left: 0;
}

.main-header {
width: 100%;
max-width: 1480px;
position: fixed;
background-image: url("http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg");
background-position-y: -30px;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
position: relative;
transition: background-position ease-in 0.3s;
height: 720px;
margin: 0 auto;
}

感谢您的帮助

Answer 1

您可以使用Pseudo元素，因为您无法在css

中对背景应用不透明度

.main-header {
height: 720px;
}

.sticky-header {
padding-top: 30px;
width: 100%;
margin: 0 auto;
position: fixed;
z-index: 1000;
background-color: #ffffff;
background-size: auto 100%;
border-bottom: 5px solid #f2f2f2;
top: 0;
left: 0;
}

.main-header {
width: 100%;
max-width: 1480px;
position: fixed;
background-position-y: -30px;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
position: relative;
transition: background-position ease-in 0.3s;
height: 720px;
margin: 0 auto;
z-index:1
}

.main-header:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    left:0;
    top: 0;
    z-index: 0;
    opacity: .4
}

<header class="main-header">
     
    <div class="sticky-header">
        <div class="row">
            <nav class="medium-10 columns primary menu">
                <ul class="inline naked">
                    <li><a href="">test</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Answer 2

不透明度不适用于背景图像。您只能在html元素上使用不透明度。

所以最好将背景图像放在没有内容的div中，并给div一个不透明度值

<div style=position:relative;">

    <div id="position:absolute; left:0;top:0;background" style="width:100%; height:100%; background-image:url(/path/to/img);opacity:0.6; z-index:1">

    </div>

    <div id="content" style="width:100%; height:100%; z-index:2"> 
        Your content here
    </div>
</div>

在背景图像上应用不透明度滤镜？

2 个答案: