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

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

你可以使用伪元素，因为你不能在 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>