掩蔽 BG 图像答案

【问题标题】：Masking BG image掩蔽 BG 图像
【发布时间】：2015-05-11 22:41:03
【问题描述】：

我正在尝试在我的 WordPress 图片/帖子中创建以下内容。

我也需要它具有响应性，因此我使用的是 Bootstrap 3 和背景图像。

帖子的代码 sn-p：

<div class="row">   
    <div class="col-md-4">
        <h1>Title</h1>
        <p>content goes here</p>
    </div>          
    <div class="col-md-8" style="background-image:url('<?php echo $thumbnail_url ?>');">
    </div>               
</div>

background-image:url 只是从帖子中获取特色图片并将其作为背景。

我正在寻找那个蒙面箭头，或者至少是假的。

【问题讨论】：

创建一个带有白条的图像。在中间你切掉了一个看起来像箭头的东西。比将该图像放在图像上方。用一点 css 你可以让它响应

标签： php jquery html css wordpress

【解决方案1】：

使用伪元素和透明边框来伪装

在此示例中，使用 ::before 和 ::after 伪元素将两个空框添加到 .image。

这些框是透明的，除了一侧之外，它的所有边框都是透明的。每一个的位置都使得它们沿着容器一侧的一半伸展，它们的边缘接触。

在边界的角相交处形成三角形。

.image 容器的所有边都设置了相同样式的边框，除了伪框所在的边框，这样就完成了剪贴蒙版的错觉，其中一个箭头切入了一侧。

媒体查询用于更改伪元素的位置并沿不同边缘重新着色边框。

提示：查看“整页”并更改视口大小以查看实际的媒体查询。

.image {
    width: 150px;
    height: 150px;
    margin: 10px;
    background-image: url('http://placehold.it/150/009afd/ffffff/&text=Aw%2C%20yeah.');
}

.clipping-arrow {
    position: relative;
    overflow: visible;
    border: 10px solid white;
    border-color: white white transparent white;
}

.clipping-arrow::before,
.clipping-arrow::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    border: 10px solid white;
    border-color: transparent transparent white transparent;
}

.clipping-arrow::before {
    right: 50%;
    left: -10px;
}

.clipping-arrow::after {
    right: -10px;
    left: 50%;
}

@media (min-width: 400px) {
    .clipping-arrow {
        border-color: white transparent white white;
    }

    .clipping-arrow::before,
    .clipping-arrow::after {
        right: -10px;
        left: auto;
        border-color: transparent white transparent transparent;
    }

    .clipping-arrow::before {
        top: -10px;
        bottom: 50%;
    }

    .clipping-arrow::after {
        top: 50%;
        bottom: -10px;
    }
}

&lt;div class="clipping-arrow image"&gt;&lt;/div&gt;

【讨论】：