如何隐藏一个div,同时为父母以外的DIV?

问题描述 投票:0回答:1

亲爱的我尝试使用CSS属性溢出:隐藏

但最终的渲染器还不是很完善。事实上,我试了几次我无法去除多余的一块父格的格之外的。

我想获得的图像旋转和cliped 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-->

CSS代码至极旋转一个div并尝试夹一块额外的div:

.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

谢谢你的帮助

最好的祝福

html css overflow
1个回答
1
投票

也许,如果添加到.mb式的阶级立场:绝对的财产会像你需要什么

© www.soinside.com 2019 - 2024. All rights reserved.