如何使用伪元素定位 SVG答案

【问题标题】：How to locate an SVG using pseudo elements如何使用伪元素定位 SVG
【发布时间】：2021-10-17 00:14:08
【问题描述】：

我正在尝试找到一个 SVG，使其看起来像这样：

我想通过::before 或::after 伪元素来做到这一点。但我不能，因为 SVG 太大，而且它的第一个位置远离父元素的边界。

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<header>
    <h1>A modern <span>publishing platform</span> </h1>
    <p>Grow your audience and build your online brand</p>
    <div class="buttons">
        <button class="btn ">Start for Free</button>
        <button class="btn border ">Learn More</button>
    </div>
</header>

</body>

</html>


*{
box-sizing: border-box;
}

html{
font-size: 10px;
}


body{
margin: 0;
padding: 0;
font-family: Poppins;
position: relative;

}


header{
width: 100%;

padding:2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: white;
border-bottom-left-radius: 12rem;
position: relative;
z-index: -1;
background-image: linear-gradient(to right, 
hsl(13, 100%, 72%),
hsl(353, 100%, 62%));



h1{
    margin-top: 10rem;
    width: 100%;
    font-size: 2.7rem;

    span{
        display:block;
    }
    
}

p{
   font-size: 1.7rem;
   font-weight: 100; 
}


.buttons{

    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn{
        padding: 1rem 2rem;
        background-color: white;
        border-radius: 3rem;
        border: none;
        margin: 0px 1rem;
        font-style: 400;
        font-family: Poppins;
        border: .1rem solid white;
        

    }

    .border{
        background-color: transparent;
        color: white;

        
        }

        margin-bottom: 10rem;

    }

    }

    header::before{
    content: url(images/bg-pattern-intro.svg);
    position: absolute;
    transform: scale(.1);

 

}

谁能告诉我该怎么做？为什么 .svg 不首先将自己定位在其父级的边界附近？

【问题讨论】：

标签： html css svg pseudo-element

【解决方案1】：

您需要为伪元素设置width 和height。照原样，它基本上是一个空的 in-line 元素，没有实际内容来支撑它打开，所以它似乎是不可见的。如果您在 chrome 中检查，您会看到它的至少一个维度是 0。

在这种情况下，我还将创建伪元素display: block，使其表现得更像div。

似乎当您将svg 图像url 设置为content 值时，默认行为是填充可用容器。

这是一个工作示例：

header::before {
  content: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg);
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
}

&lt;header&gt;&lt;/header&gt;

另一个选项是将svg 设置为background-image。您可能还需要设置一个background-size 值（在本例中为contain），以便背景图像根据其容器而不是svg 文件固有的viewBox 属性进行缩放。

header::before {
  content: "";
  background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg) center center / contain no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
}

&lt;header&gt;&lt;/header&gt;

【讨论】：

旁注：在我看到这个问题之前，我实际上并不知道您可以将图像 urls 设置为 content 属性值。相当整洁，虽然我不确定我是否会使用它......不过你知道的越多！