Question

亲爱的我尝试使用css属性溢出：隐藏

但是最终的渲染器还不够完善。确实，在我的几次尝试中，我未能删除父div之外的多余div。

我想在图像的右下角获得一个旋转的且剪裁为div的作者姓名。

基本HTML代码

<div class="mb-wrap mb-style">
    <div class="mb-thumb"></div>
    <blockquote cite="">
        <p>Je ne fais ni de l’Art pour l’Art, ni de l’Art contre l’Art. Je suis pour l’Art, <span>mais pour l’art qui n’a rien à voir avec l’Art, </span> car l’art a tout à voir avec la vie.</p>
    </blockquote>
    <div class="mb-attribution">
        <p class="mb-author">Robert Rauschenberg</p>
        <cite></cite>
    </div>
    <!-- #mb-attribution-->
</div>
<!--#mb-wrap-->

可旋转div并尝试剪辑额外div的CSS代码：

.mb-style {
    width: auto;
    padding: 20px 240px 50px 20px;
    background: #444 url(https://www.beart.fr/wp-content/uploads/2019/02/1998-Robert-Rauschenberg-Retrospectiva.jpg) no-repeat;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
    overflow: hidden;
  backface-visibility: hidden;
}

.mb-style blockquote p {
    color: rgba(255,255,255,0.95);
    font-size: 21px;
    line-height: 26px;
    text-align: right;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}

.mb-style blockquote p span {
    font-weight: 700;
    color: #fcf779;
    font-size: 58px;
    line-height: 58px;
    display: block;
    padding: 10px;
    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
    transform: rotate(-7deg) translateY(10px);
}

.mb-style blockquote p span:before {
    font-family: 'icons';
    content: '\275d'; 
    font-weight: normal;
    opacity: 0.1;
    font-size: 136px;
    position: absolute;
    color: #fff;
    top: -50px;
    left: -25px;
    transform: rotate(45deg);
}

.mb-style .mb-attribution {
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    background: #757575;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 30px;
    transform: rotate(-40deg) translate(405px, 380px);
}

.mb-style .mb-author:before {
    content: '\2014';
    padding-right: 4px;
}

.mb-style .mb-attribution cite a{
    color: #777;
}

.mb-style .mb-attribution cite a:hover{
    color: #fcf779;
}

View on JSFiddle

感谢您的帮助

最好的问候

Answer 1

也许，如果您添加到 .mb-style 类 position：absolute 属性，它将看起来像您需要的

在父级div之外时如何隐藏div？

1 个答案: