主页 / 问题 / 1020711
Accepted
HamSter
Asked:2020-09-05 23:12:04 +0000 UTC2020-09-05 23:12:04 +0000 UTC

布局中的图层蒙版

  • 772

有这样一个块，带有图片，渐变和“通过”此渐变的窗口（psd中的图层蒙版）+文本和窗口内的按钮：

在此处输入图像描述

问题：如何在自适应布局中、使用 SVG 蒙版或以任何其他方式实现这一点？

还没有想法。带着面具，再配合问题的适应性。

编码：

.img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.slider-right {
  width: 300px;
  height: 300px;
  border: 2px solid #fff;
  position: relative;
}

.slider-right .btn {
  position: absolute;
  left: 0;
  bottom: 20px;
   right: 0;
  margin: 0 auto;
  display: block;
  max-width: 150px;
}

.slider .container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.slider .container .row {
  height: 100%;
}

.slider {
  color: #fff;
  height: 500px;
}

.slider-inner {
  position: relative;
  width: 100%;
  
  background: rgba(21,91,50,1);
background: -moz-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(21,91,50,1)), color-stop(100%, rgba(21,91,50,0)));
background: -webkit-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -o-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -ms-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: linear-gradient(to right, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
<div class="slider">
  <img src="https://images.unsplash.com/photo-1469022563428-aa04fef9f5a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="" class="img">
  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-sm-6">
        <h1>Lorem ipsum dolor sit amet.</h1>
      </div>
      <div class="col-sm-6">
        <div class="slider-right">
          <a href="#" class="btn btn-danger">Button</a>
        </div>
      </div>
    </div>
  </div>
</div>

html

2 个回答

  1. SVG + Mask - 过滤器解决方案

    此解决方案不使用 svg 过滤器来装饰背景。您可以将蒙版的 svg 属性用于窗口和背景。请参阅代码以获取注释。
    按钮和图像位于 SVG 内部，因此布局是自适应的，不会因任何小工具显示尺寸而中断。 

    #rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}

g:hover {
cursor:pointer;
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 600 399" preserveAspectRatio="xMinYMin meet"  >  

<defs>
<mask id=msk1>
      <!-- фон Чем темнее закраска фона в маске, тем менее прозрачна картинка -->      
	  <rect width="100%" height="100%" fill="#1F2C28" />
	  
       <!-- Окно. Белая закраска прямоугольника в маске делает его полностью прозрачным  -->    
	 <rect x="50%" y="25%" width="35%" height="35%"  fill="white" stroke-width="2" stroke="black"></rect>
    
	</mask>
</defs> 

<image mask="url(#msk1)" xlink:href="https://images.unsplash.com/photo-1469022563428-aa04fef9f5a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" width="100%" height="100%" /> 
 
 <!-- Кнопка -->
<g>
 <rect id="rect1" x="335" y="210" width="150" height="20" fill="#EA0000" stroke="white" rx="10" />
 <circle id="crc1" cx="345" cy="220" r="8" fill="white" />
 <text x="416" y="224" font-size="14px" fill="white" text-anchor="middle" >Узнать подробности</text>
</g>
</svg>

    蒙版 + 径向渐变

    将渐变添加到蒙版以使背景透明。

    <radialGradient id="RadialGrad"
           fx="100%" fy="0%" r="50%"
           spreadMethod="pad">
          <stop offset="50%"   stop-color="#1F2C28" stop-opacity="0.2"/>
          <stop offset="100%" stop-color="#676860" stop-opacity="1" />
        </radialGradient>


    #rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}
g:hover {
cursor:pointer;
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 600 399" preserveAspectRatio="xMinYMin meet"  >  

<defs>
<mask id=msk1>
      <!-- фон Чем темнее закраска фона в маске, тем менее прозрачна картинка -->      
	  <rect width="100%" height="100%"  fill="url(#RadialGrad)" />
	  
       <!-- Окно. Белая закраска прямоугольника в маске делает его полностью прозрачным  -->    
	 <rect x="50%" y="25%" width="35%" height="35%" rx="2.5%"  fill="white" stroke-width="2" stroke="black"></rect>
    
	</mask> 
	 <!-- К маске добавляется градиент, что обеспечивает нераномерность прозрачности -->
	<radialGradient id="RadialGrad"
           fx="90%" fy="50%" r="50%" >
          <stop offset="60%"   stop-color="#676860" stop-opacity="1"/>
          <stop offset="100%" stop-color="#10150F" stop-opacity="1" />
        </radialGradient>
</defs> 

<image mask="url(#msk1)" xlink:href="https://images.unsplash.com/photo-1469022563428-aa04fef9f5a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" width="100%" height="100%" /> 
 
 <!-- Кнопка -->
<g>
 <rect id="rect1" x="335" y="210" width="150" height="20" fill="#EA0000" stroke="white" rx="10" />
 <circle id="crc1" cx="345" cy="220" r="8" fill="white" />
 <text x="416" y="224" font-size="14px" fill="white" text-anchor="middle" >Узнать подробности</text>
</g>
</svg>

    任何颜色的不均匀颜色背景

    查看代码中的注释：

    #rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}

g:hover {
cursor:pointer;
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 600 399" preserveAspectRatio="xMinYMin meet"   >  

<defs>
<mask id=msk1>
      <!-- фон Чем темнее закраска фона в маске, тем менее прозрачна картинка -->      
	  <rect width="100%" height="100%"  fill="url(#RadialGrad)" />
	  
       <!-- Окно. Белая закраска прямоугольника в маске делает его полностью прозрачным  -->    
	 <rect x="50%" y="25%" width="35%" height="35%" rx="2.5%"  fill="white" stroke-width="2" stroke="black"></rect>
    
	</mask>
	<radialGradient id="RadialGrad"
           fx="90%" fy="40%" r="50%" >
          <stop offset="40%"   stop-color="#676860" stop-opacity="1"/>
          <stop offset="100%" stop-color="#1F2C28" stop-opacity="0.2" />
        </radialGradient>
</defs> 
 <!-- Окраска фона -->
 <rect width="100%" height="100%" fill="#336D47" fill-opacity="0.95" /> 
  <!-- Картинка фона -->
<image mask="url(#msk1)" xlink:href="https://isstatic.askoverflow.dev/HKCLF.jpg" width="100%" height="100%" /> 
 
 <!-- Белая рамка вокруг окна -->
 <rect x="50%" y="25%" width="35%" height="35%" rx="2.5%"  fill="none" stroke-width="2" stroke="white"></rect>

 <!-- Кнопка -->
<g class="gr1">
 <rect id="rect1" x="335" y="210" width="150" height="20"  stroke="white" rx="10" />
 <circle id="crc1" cx="345" cy="220" r="8" fill="white" />
 <text x="416" y="224" font-size="14px" fill="white" text-anchor="middle" >Узнать подробности</text>
</g>

</svg>

    • 5
  2. Best Answer

    带有白色阴影的白色方块的 SVG 蒙版正是您正在寻找的。

    <svg viewbox=0,0,100,100 height=100vh style="background-color:#145b31">
  <defs>
    <filter id="f2" x="-100" y="-100" width="250" height="250">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    <mask id=mask>
      <rect x=25 y=25 width=50 height=50 filter=url(#f2) fill=white></rect>
    </mask>
  </defs>
  <image xlink:href="https://picsum.photos/id/400/400/400" 
         x=10 y=10 width=80 height=80 mask=url(#mask) fill=white></image>
  <rect x=25 y=25 width=50 height=50 fill=none stroke=white stroke-width=0.2></rect>
</svg>

    • 4

相关问题