CSS将嵌套元素背景与background-size：cover对齐

Question

我计划将按钮上的背景与身体背景对齐，并模糊按钮以创建一个冷淡的玻璃效果。

但是我无法让它们正确对齐。

＆＃13;

＆＃13;

*{
  padding:0px;
  margin:0px
}

body{
  width:100vw;
  height:100vh;
  background:red;
 /*center the button*/
  display:flex;
  justify-content:center;
  align-items:center;
  /*background image properties*/
  background-image:url('https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg');
  background-size:cover;
  background-position:center center;
}

.button{
  display:block;
  height:200px;
  width:200px;
  background:blue;
  border-radius:10px;
  /*enter the f inside the box*/
  display:flex;
  justify-content:center;
  align-items:center;
 /*size of the f*/
  font-size:180px; 
  /*frosty glass effect*/
    
}

.position{
  position:relative;
  left:30px;
  top:24px;
  
  color:white;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a class='button'><i class="fa fa-facebook position"></i></a>

＆＃13;

＆＃13;

＆＃13;

更大的问题是我希望蓝色部分中的背景图像与其背后的背景对齐。然后模糊蓝色背景而不模糊不是白色＆＃34; f＆＃34;标志。

效果应与此示例图像类似，不同之处在于图标不应该是半透明的：

Answer 1

我认为radial-gradient rgba颜色与结果

足够接近

background: radial-gradient(rgba(75, 212, 174, 0.95) 27%, rgba(77, 128, 191, 0.8) 77%)

* {
  padding: 0px;
  margin: 0px
}

body {
  width: 100vw;
  height: 100vh;
  background: red;
  /*center the button*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*background image properties*/
  background-image: url('https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg');
  background-size: cover;
  background-position: center center;
}

.button {
  height: 200px;
  width: 200px;
  background: radial-gradient(rgba(75, 212, 174, 0.95) 27%, rgba(77, 128, 191, 0.8) 77%);
  border-radius: 10px;
  /*enter the f inside the box*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*size of the f*/
  font-size: 180px;
  /*frosty glass effect*/
}

.position {
  position: relative;
  left: 30px;
  top: 24px;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a class='button'><i class="fa fa-facebook position"></i></a>

Answer 2

简短的回答是，您无法使用cover对齐这两个背景，因为您将无法在不同大小的子元素中假设父背景的精确大小。

如果您想继续使用cover，最好的办法是简化和使用像background-color:rgba(0, 0, 255, 0.5);这样的Alpha通道背景颜色

这将为您提供透明的背景颜色叠加，但不会产生模糊效果。

对于＆＃34;磨砂玻璃＆＃34;效果，这是一个技巧，你可以对齐背景图像，然后在子元素上模糊它，我认为这是你想要完成的。

如果您愿意修改背景封面以支持设定的背景尺寸（例如100vw），则可以执行此操作。您必须将内容（白色f）与模糊的背景分开，因为模糊会影响元素内的所有内容。您还必须将其包裹在overflow:hidden的容器中，以保持锋利的边缘。

＆＃13;

＆＃13;

*{
  padding:0px;
  margin:0px
}

body{
  width:100vw;
  height:100vh;
  background:url('https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg') no-repeat center;
  background-size: 100vw;
}
.button-background, 
.button{
  position:absolute;
  left:50%;
  top: 50%;
  margin:-100px 0 0 -100px;
  display:block;
  height:200px;
  width:200px;
  overflow:hidden;
  border-radius:10px;
}
.button-background div{
  height:100%;
  background:url('https://s-media-cache-ak0.pinimg.com/originals/98/a5/cf/98a5cf91e8aef10a2b81303a7ccbce9e.jpg') no-repeat center;
  background-size: 100vw;
  filter: blur(5px);
}

.button{
  font-size:180px; 
  background-color:rgba(0, 0, 255, 0.5);
}

.position{
  position:absolute;
  right:30px;
  bottom:-15px;
  color:white;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='button-background'><div></div></div>
<a class='button'><i class="fa fa-facebook position"></i></a>

＆＃13;

＆＃13;

＆＃13;