第二个 Instagram 按钮的 CSS 属性

Question

Jostar

Asked:2022-05-07 21:26:23 +0000 UTC2022-05-07 21:26:23 +0000 UTC 2022-05-07 21:26:23 +0000 UTC

两个街区相交处的图片

772

你能告诉我如何正确地布置一个块，使两个块的交叉处有一张图片吗？如果使用 position: absolute 进行输入，那么在适应其他分辨率时，您将不得不手动调整此图像的位置

3 个回答

Voted

Инквизитор · Answer 1 · 2022-05-07T21:59:52Z

Best Answer

Инквизитор

2022-05-07T21:59:52Z2022-05-07T21:59:52Z

所以？

.zzz {
  min-height: 150px;
  position: relative;
}

.aaa {
  clip-path: ellipse(30% 50% at 30% 50%);
  background-color: rgba(255, 255, 0, 0.25);
  min-height: inherit;
}

.bbb {
  clip-path: ellipse(30% 50% at 70% 50%);
  height: 100%;
  min-height: inherit;
  background-image: url('https://www.textures.com/system/gallery/photos/Fabric/Plain%20Fabric/120847/FabricPlain0147_3_350.jpg');
}

.ccc,
.ddd {
  border: 2px solid black;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  border-radius: 100%;
  top:0;
  width:60%;
}

.ccc {left:0;}
.ddd {right:0;}

<div class="zzz">
  <div class="aaa">
    <div class="bbb"></div>
  </div>
  <div class="ccc"></div>
  <div class="ddd"></div>
</div>

5

Alexandr_TT · Answer 2 · 2022-05-07T22:57:30Z

SVG 解决方案

适用于所有浏览器，解决方案是自适应的

使用图案，用图像填充左椭圆
使用应用于右椭圆的蒙版，切掉左椭圆的一部分

一对椭圆

<style>
.container {
width:50vw;
height:auto;
}
</style>
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 150" >  
         <defs>
           <pattern id="patt"  patternUnits="userSpaceOnUse" width="100%" height="100%"> 
             <image xlink:href="https://isstatic.askoverflow.dev/GF6Xi.jpg" width="100%" heigh="100%" />
           </pattern> 
           <mask id="mask"> 
             <rect width="100%" height="100%" fill="white" />           
            <ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
           </mask>
         </defs>

<ellipse fill="url(#patt)" cx="100" cy="50" rx="90" ry="40"  stroke="black" />  
  <ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40"  stroke="black" /> 
 
 <ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>  
</div>

两对椭圆（如问题）

<style>
.container {
width:50vw;
height:auto;
}
</style>
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 150" >  
         <defs>
           <pattern id="patt"  patternUnits="userSpaceOnUse" width="100%" height="100%"> 
             <image xlink:href="https://isstatic.askoverflow.dev/GF6Xi.jpg" width="100%" heigh="100%" />
           </pattern> 
           <mask id="mask"> 
             <rect width="100%" height="100%" fill="white" />           
            <ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
           </mask>
         </defs>

<ellipse fill="url(#patt)" cx="100" cy="50" rx="90" ry="40"  stroke="black" />  
  <ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40"  stroke="black" /> 
 
 <ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>  
</div>  
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 150" >  
         <defs>
           <pattern id="patt2"  patternUnits="userSpaceOnUse" width="100%" height="100%"> 
             <image xlink:href="https://isstatic.askoverflow.dev/g29kk.jpg" width="100%" heigh="100%" />
           </pattern> 
           <mask id="mask"> 
             <rect width="100%" height="100%" fill="white" />           
            <ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
           </mask>
         </defs>

<ellipse fill="url(#patt2)" cx="100" cy="50" rx="90" ry="40"  stroke="black" />  
  <ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40"  stroke="black" /> 
 
 <ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>    
</div>

更新

具有自适应文本的变体

.container {
width:100vw;
height:auto;
background:#FFE7D7;
}
.txt {
fill:#434238;
font-family:serif;
font-size:10px;
}
.txtN {
 fill:black;
font-family:sans-serif;
font-size:18px;
}

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 450 200" >  
         <defs>
           <pattern id="patt"  patternUnits="userSpaceOnUse" width="100%" height="100%"> 
             <image xlink:href="https://isstatic.askoverflow.dev/GF6Xi.jpg" width="100%" heigh="100%" />
           </pattern> 
           <mask id="mask"> 
             <rect width="100%" height="100%" fill="white" />           
            <ellipse cx="310" cy="50" rx="120" ry="40" fill="black" stroke="black" />
           </mask>
         </defs>

<ellipse fill="url(#patt)" cx="120" cy="50" rx="120" ry="40"  stroke="black" />  
  <ellipse mask="url(#mask)" fill="#FFE7D7" cx="120" cy="50" rx="120" ry="40"  stroke="black" /> 
 
 <ellipse cx="310" cy="50" rx="120" ry="40" fill="none" stroke="black" />
      <!-- Для левого эллипса -->
  <g>
 <text class="txtN" x="20" y="30" font-size="18px"  >01. </text>
     <text class="txt" x="50" y="30"  >Равным образом постоянный </text> 
      <text class="txt" x="24" y="43"  >количественный рост и сфера нашей </text>   
        <text class="txt" x="30" y="56" font-size="10px" ><tspan style="fill:#FF872C">активности позволяет</tspan> выполнять </text> 
         <text class="txt" x="36" y="67"  >важные задания по разработке </text>     
          <text class="txt" x="48" y="77"  >модели развития. Товарищи! </text>  
   </g>       
        <!-- Для правого эллипса -->
  <g>
   <text class="txtN"  x="390" y="30">02. </text> 
    <text class="txt"  x="250" y="30"  >Таким образом постоянное </text> 
      <text class="txt"  x="244" y="43" >инфорационно-пропогандискское</text>   
        <text class="txt"  x="250" y="56"  >обеспечение нашей деятельности</text> 
         <text class="txt"  x="244" y="67"  >требует от нас <tspan style="fill:#FF872C">анализа позиций</tspan>  </text>        
          <text  class="txt"  x="252" y="77" font-size="10px" >занимаемых участниками </text>   
   </g>       
      
</svg>  
</div>

BlackStar1991 · Answer 3 · 2022-05-07T21:31:29Z

BlackStar1991

2022-05-07T21:31:29Z2022-05-07T21:31:29Z

这完全取决于将设计简化为移动设备时它应该如何表现。你需要问设计师。*我不会坚持“两个街区”，但会从正确的街区推开。当然还有救援的剪辑路径

1

两个街区相交处的图片

SVG 解决方案

更新

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

两个街区相交处的图片

3 个回答

SVG 解决方案

更新

相关问题