时间戳

首页 > 解决方案 > 如何在父 div 之外隐藏 div？

html - 如何在父 div 之外隐藏 div？

问题描述

亲爱的我尝试使用 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;
}

在 JSFiddle 上查看

谢谢你的帮助

最好的祝福

标签： htmlcssoverflow

解决方案

也许，如果您添加到.mb 样式的类position:absolute属性，它看起来就像您需要的一样

推荐阅读