Question

我有一个包含表单的纯色背景的div。我在这个表单周围设置了50px的填充，并希望将纯色淡出为透明，以便根据像素变量查看背后的背景。例如，如果我希望从表单到div边缘的所有内容逐渐淡出，我可以选择50px。或者45.或者25等。

当前div：

我希望它看起来像：

这个div是一个可变大小（高度：自动;），所以不幸的是，不可能只将图像作为背景。

我已尝试使用此Fiddle来修复线性渐变，但我对它们没有经验，我认为我刚刚取消了所有内容。

HTML：

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS：

.formBackground {
    top: 0px;
    float: left;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: auto;
  background-image : linear-gradient(to bottom, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to left, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to top, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to right, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    margin-top: 100px;
    overflow: hidden;
    margin-bottom: 4.5em;
}

提前致谢！

Answer 1

我过去曾使用过阴影来达到这种效果。

  box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);

通过在任何方向上添加一个0px平移的框阴影，25px的扩展距离和25px的模糊半径，使其成为您喜欢的50px模糊。通过将边距更改为50px并使用top，right等进行定位，您可以准确地将其移至您想要的位置。

HTML：

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS：

.formBackground {
    height: auto;
    background-color : rgba(55,54,51, 1);
    overflow: hidden;
    margin: 50px;
    box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
}

Answer 2

您应该在同一背景中组合所有渐变。你还需要在拐角处依靠一些径向渐变。

以下是一个例子：

.box {
  width: 200px;
  height: 100px;
  background:
  /*center*/
  linear-gradient(rgba(55, 54, 51, 1),rgba(55, 54, 51, 1)) center/calc(100% - 40px) calc(100% - 40px) no-repeat,
  /*4 corners*/
  radial-gradient(circle at bottom left, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) top right /20px 20px no-repeat,
  radial-gradient(circle at bottom right, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) top left /20px 20px no-repeat,
  radial-gradient(circle at top right, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) bottom left /20px 20px no-repeat,
  radial-gradient(circle at top left, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) bottom right /20px 20px no-repeat,
  /*4 sides*/
  linear-gradient(to left, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) right center/20px calc(100% - 40px) no-repeat,
  linear-gradient(to right, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) left center/20px calc(100% - 40px) no-repeat,
  linear-gradient(to bottom, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) top center/calc(100% - 40px)  20px no-repeat,
  linear-gradient(to top, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) bottom center/calc(100% - 40px)  20px no-repeat;
}

<div class="box">
</div>

<div class="box" style="width:500px;">
</div>

<div class="box" style="height:200px;">
</div>

这是CSS变量的另一种语法，您可以轻松调整颜色和距离：

.box {
  width: 200px;
  height: 100px;
  box-sizing:border-box;
  color:#fff;
  --i:55, 54, 51;
  --c:rgba(var(--i),1) , rgba(var(--i), 0);
  --d:20px;
  padding:var(--d);
  background-image:
  linear-gradient(rgba(var(--i), 1),rgba(var(--i), 1)),
  
  radial-gradient(circle at bottom left, var(--c)  70%),
  radial-gradient(circle at bottom right, var(--c) 70%),
  radial-gradient(circle at top right, var(--c) 70%),
  radial-gradient(circle at top left, var(--c) 70%),
  
  linear-gradient(to right, var(--c)),
  linear-gradient(to left, var(--c)),
  linear-gradient(to top, var(--c)),
  linear-gradient(to bottom, var(--c));
  
  background-size:
   calc(100% - 2*var(--d)) calc(100% - 2*var(--d)),
   
   var(--d) var(--d),var(--d) var(--d),var(--d) var(--d),var(--d) var(--d),
   
   var(--d) calc(100% - 2*var(--d)),var(--d) calc(100% - 2*var(--d)),calc(100% - 2*var(--d)) var(--d),calc(100% - 2*var(--d)) var(--d);
  background-position:center,
  
    top right,top left,bottom left,bottom right,
    
    right center, left center,top center, bottom center;
  background-repeat:no-repeat;
}

<div class="box">
Some content
</div>

<div class="box" style="--d:40px;--i:0,20,70">
Some content
</div>


<div class="box" style="--d:10px;--i:255,0,0">
Some content
</div>

CSS - 将div的所有边缘淡化为透明定义距离

2 个答案: