主页 / 问题 / 955164
Accepted
Anton Brock
Asked:2020-03-12 00:27:00 +0000 UTC2020-03-12 00:27:00 +0000 UTC

如何将背景与引导容器的中间对齐？

  • 772

如何对齐容器 ( fluid) 的背景以使其完全显示。
有一张图片 (SVG) - 一个波浪，如果您通过 指定bg-url，那么图片的顶部、中心或底部都是可见的。
第一个屏幕。我得到什么，2 个屏幕，你需要什么。但是由于图片是svg的，无法上传到网上获取链接，所以还有一张图片，但问题依旧存在。即图片与顶部和底部的对齐方式。

我所拥有的截图 到底需要什么

我的代码：

.ribbon_first {
    background: url(https://cdn.pixabay.com/photo/2017/05/16/11/45/blue-waves-2317606_960_720.png) no-repeat;
   background-size: 100%;
   background-position: 100%;
   height: 100%;
}
<section class="container-fluid ribbon_first">
  <div class="container">
    <div class="row">
      <div class="col-md-6 whomСourse-about">
        <h2>Курс идеально подойдет</h2>
        <p>Тем, кто хочет продвигать бренды в Инстаграм, используя все его преимущества</p>
      </div>
    </div>
  </div>
</section>

css

2 个回答

  1. Best Answer

    如果我理解正确，那么您需要一张背景图片：

    在此处输入图像描述

    沿着粉色波浪图的轮廓裁剪：

    在此处输入图像描述

    我将向您展示一种技术，通过它您可以很容易地做到这一点。

    在这种情况下，该块将是完全自适应的，您可以将其插入任何容器、任何应用程序中。

    • 要获取粉色波浪剪裁的轮廓，您需要获取轮廓 path。

      为此，我们编写了一个小 svg 文件以将其添加到矢量编辑器中。粉色波浪图片有尺寸1331 х 546px 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1331" height="546" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet"  >  

<image xlink:href="https://isstatic.askoverflow.dev/Ivqf1.png" width="100%" height="100%" />
</svg>

    • 用矢量编辑器打开这个文件

    在此处输入图像描述

    1. 借助该工具Рисовать кривые Безье，沿轮廓绘制节点。

    2. 使用工具Редактировать узлы контура选择节点（它们变为彩色）

    3. 使节点自动平滑（图中的数字 3）

    4. 使用节点的控制杆，我们实现了轮廓与给定形状的最大重合

      • 保存 *.svg 文件

      • 捡起path

    下面是这个补丁的轮廓，这些轮廓将被修剪clip-path 

    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1331" height="546" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet" border="1">

  <path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:none;stroke:#000"/>  
  
    <image xlink:href="https://isstatic.askoverflow.dev/O4W28.png" height="100%" width="100%"/>
</svg>

    • 现在我们将生成的轮廓添加到命令中clip-path并用它裁剪背景图像

    .container {
width:100%;
height:100%;
}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet" border="1">
  <defs>
	<clipPath id="cp1">
  <path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:none;stroke:#000"/> 

</clipPath>  
</defs>  
  
    
	 <path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:#F783AC;stroke:none"/> 
       <image xlink:href="https://isstatic.askoverflow.dev/O4W28.png" height="100%" width="100%" clip-path="url(#cp1)"/>
 </svg>
 </div>

    结果是一个完全响应的块，适用于所有浏览器，包括IE Edge

    您可以通过更改容器的宽度和高度的百分比来更改块的初始尺寸。

    • 4 

  2. .ribbon_first {
    background: url(https://cdn.pixabay.com/photo/2017/05/16/11/45/blue-waves-2317606_960_720.png) no-repeat;
   background-size: 100% 100%;
}
    <section class="container-fluid ribbon_first">
  <div class="container">
    <div class="row">
      <div class="col-md-6 whomСourse-about">
        <h2>Курс идеально подойдет</h2>
        <p>Тем, кто хочет продвигать бренды в Инстаграм, используя все его преимущества</p>
      </div>
    </div>
  </div>
</section>

    • -1

相关问题