在模糊的背景图像上显示图像

问题描述：

我试图在相同的图像上显示图像，但是模糊并且作为背景。在模糊的背景图像上显示图像

.background-image { 
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(10px); 
 
    height: 800px; 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 1; 
 
} 
 

 
.hero-image { 
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    display: block; 
 
}

<div class="background-image"></div> 
 
<div class="hero-image"></div>

本代码不显示图像的英雄。

尝试在另一个div内创建div但失败。

有什么建议吗？

在此先感谢。

答

我不知道，你为什么想position:fixed你的background1但是，使用下面显示的方法，你可以做。

但是，如果您尝试将您的background2嵌套在background1格内，那么blur过滤器将应用于这两个图像，我认为，您不希望这样。

点：

每当使用background-image您需要定义height和width否则将不可见的browser。

relative

div

position: absolute

，帮助您控制您的布局。

.parent { 
 
    position: relative; 
 
    height: 800px; 
 
    /* */ 
 
} 
 

 
.background-image { 
 
    background-image: url(http://lorempixel.com/output/nature-q-c-640-480-6.jpg); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(10px); 
 
    width: 100%; 
 
    height: 800px; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
} 
 

 
.hero-image { 
 
    background-image: url(http://lorempixel.com/output/people-q-c-208-204-2.jpg); 
 
    background-size: cover; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 10; 
 
    transform: translate(-50%, -50%); 
 
    display: block; 
 
}

<div class="parent"> 
 
    <div class="background-image"> 
 
    </div> 
 
    <div class="hero-image"></div> 
 

 
</div>

谢谢。像魅力一样工作。我想要背景图像和英雄图像位置：固定。但是，如何避免右侧的滚动条？ –

你给出了一个'height：800px'这可能是滚动的原因。你可以给'parent div'或'body'标签赋予'overflow：hidden;'。然后没有滚动条 –

答

你忘了定位的英雄形象fixed为好。这样，您可以将其叠加在背景图像的顶部。订单使用z-index确保。

在下文中，我编辑了自己的风格，使顺序一致，首先显示最重要的部分：一个元素如何定位，其中，在什么尺寸，然后在后台，然后其他的东西。您现在可以轻松看到两幅图像之间的重叠和差异。

请注意，-webkit-前缀版本的filter是not needed。

.background-image { 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 750px; 
 
    
 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    
 
    filter: blur(5px); 
 
} 
 

 
.hero-image { 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 750px; 
 

 
    background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb'); 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
}

<div class="background-image"></div> 
 
<div class="hero-image"></div>

在模糊的背景图像上显示图像

相关推荐