CSS

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 的所有边淡化为透明

CSS - Fading All Edges of div to Transparent over Defined Distance

html

linear-gradients