html - 使背面图像模糊和正面图像清晰可见

Question

我在 bootstrap 中使用 carosel，我希望背景图像模糊，顶部图像正确可见。为此，我在样式上使用了两个类，但结果正面和背面图像都变得模糊了。同样的 fiddle 在这里 https://jsfiddle.net/v37wju8h/6/ .请增加屏幕尺寸以检查结果的问题。下面是代码-

<div class="container">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">   <!-- Wrapper for slides -->
            <div class="item active back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg"/>
                <div class="carousel-caption">
                    <h3>Image1</h3>
                </div>
            </div>
            <div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
                <div class="carousel-caption">
                    <h3>Image2 </h3>
                </div>
            </div>
            <div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
                <div class="carousel-caption">
                    <h3>Image 3</h3>
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div> 
</div>

Answer 1

你可以使用不透明度

opacity: 0.5
position: relative;