Question

我正在使用bootosrap中的carosel，我希望背景图像模糊，顶部图像可以正常显示。为此，我在风格上使用了两个类，但结果前后图像都变得模糊。同样的小提琴是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;

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

1 个答案: