Question

我有一个网页，其中包含一系列隔开的文本元素。

有一条绝对定位的线穿过这些文本元素，如下所示。

我需要在文本元素内部将其切断，就像在灰色区域内不可见的那一行一样。

现在不要立即用background: black;回答，因为我要显示的行后面有一个非黑色背景。

有什么方法可以掩盖当该元素前面的线根本不可见吗？

我的测试代码：

<div></div>
<p>Example textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample textExample text</p>

p {
  text-align: center;
  margin: 45vh 0;
  z-index: 2;
  padding: 20vw;
  position: relative;
}

div {
  position: absolute;
  margin-left: calc(50vw - 1px);
  top: 0;
  width:2px;
  background: #cfc35d;
  height: 100vh;
}

注意：我不想使用原始像素值，因为这都是动态内容。

Answer 1

是的，CSS伪元素可以做到

使用伪元素：before和：after真的很神奇。

因为您可以相对于其父元素绝对定位伪元素，所以可以将它们视为每个元素可使用的两个额外图层。

它们在不负面影响标记语义的情况下释放了很多有趣的设计可能性。

* {
    margin:0px;
}
.wrapper {
    position: fixed;
    left: 0;
    width: 0;
    width: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-size:20px;
    overflow:hidden;
}
.tagline {
    position:relative;
    width:150px;
    display:block;
    text-align:center;
}
.tagline:after, .tagline:before {
    content:'';
    width:5px;
    height:50vh;
    background:red;
    display: inherit;
    position:absolute;
    left:calc(50% - 5px)
}
.tagline:after {
    top:100%;
}
.tagline:before {
    bottom:100%;
}

<div class="wrapper">
  <div class="tagline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
</div>

Answer 2

您可以使用“之前”和“之后”伪元素进行一些调整。见下文：

address_start_date

SELECT DISTINCT
     PATIENT_ID
     ,ADDRESS_START_DATE
     ,ADDRESS_END_DATE
     ,RANK() OVER (PARTITION BY PATIENT_ID ORDER BY ADDRESS_START_DATE DESC) AS Ind
FROM Member_Table
;

Answer 3

您可以在h2标签或mix-blend-mode处使用更高的z-index：在行类处叠加请参见下面的代码段。您可以更改背景。

<div class="cart-collaterals">
<a class="button wc-backward return-to-shop-cart-wholesale" href="/wholesale-ordering/">
        <?php esc_html_e( 'Return to pro shop', 'woocommerce' ); ?>
    </a>
    <a class="button wc-backward return-to-shop-cart-retail" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
        <?php esc_html_e( 'Return to shop', 'woocommerce' ); ?>
    </a>
        <?php
        /**
         * Cart collaterals hook.
         *
         * @hooked woocommerce_cross_sell_display
         * @hooked woocommerce_cart_totals - 10
         */
        do_action( 'woocommerce_cart_collaterals' );
    ?>
</div>

body{
  background: black;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
 h2{
    text-align: center;
    color: white;
    margin: 0;
    width: 100%;
    background: red;
    padding: 0;
  }
 .line{
    position: absolute;
    width: 10px;
    height: 100vh;
    background: blue;
    left: 50%;
    transform: translateX(-50%);
   mix-blend-mode: overlay;
  }

CSS遮罩元素仅位于其顶部

3 个答案: