盒子有歪斜和背景图像

我想要放在盒子内的图像与盒子相同的方式倾斜。我希望图像不会像盒子一样偏斜。问题是我已将skew(-20deg)设置为框，并且当我在图像上设置skew(20deg)时，它无法工作。图像不会站直。任何解决方案盒子有歪斜和背景图像

.accordion { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
    margin: 50px auto; 
 
    background-color: #FFAE00; 
 
} 
 

 
.accordion ul { 
 
    width: 90%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5%; 
 
    height: 100%; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    width: 25%; 
 
    height: 250px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
    float: none; 
 
    transform: skewX(-20deg); 
 
} 
 

 
.accordion ul li div { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 300px; 
 
    width: 37vw; 
 
    position: relative; 
 
    z-index: 0; 
 
    vertical-align: bottom; 
 
    padding: 55px 45px; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    margin-left: -53px; 
 
    text-decoration: none; 
 
    transform: skewX(20deg); 
 
    font-family: Open Sans, sans-serif; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    text-overflow: ellipsis; 
 
    position: relative; 
 
    z-index: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    font-family: Montserrat, sans-serif; 
 
    text-overflow: clip; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    border-bottom: unset; 
 
    margin-bottom: 2px; 
 
    top: 165px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 165px; 
 
    font-size: 13.5px; 
 
    font-weight: 100; 
 
    margin-left: 0; 
 
    height: auto; 
 
} 
 

 
.accordion ul li:nth-child(1) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(2) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(3) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul li:nth-child(4) { 
 
    background-image: url("http://michael-ferry.com/assets/accordion3.jpg"); 
 
} 
 

 
.accordion ul:hover li:hover { 
 
    width: 50%; 
 
} 
 

 
.accordion ul:hover li:hover a { 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    transform: none; 
 
}

<div class="accordion"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

小提琴：https://jsfiddle.net/c3wbvutw/

来源

2017-05-26 MA A

看看是否能解决您的问题，通过使用伪元素：[链接]（https://stackoverflow.com/questions/18289643/how- do-i-unskew-background-image-in-skewed-layer-css） –

我能够用我之前谈到的方法来管理它在评论。基本上，我用::before伪元素将背景图像，然后unskewed他们。

检查出来：

/* +++++++++++++++ NEW INFORMATION ++++++++++++++ */ 
 

 
.accordion ul li::before { 
 
    content: ""; 
 
    transform: skewX(20deg); 
 
    -ms-transform: skewX(20deg); 
 
    -webkit-transform: skewX(20deg); 
 
    background-image: url(http://michael-ferry.com/assets/accordion3.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    position: absolute; 
 
    transform: translateX(-50%) skewX(20deg); 
 
    -webkit-transform-origin: top left; 
 
    -ms-transform-origin: top left; 
 
    transform-origin: top left; 
 
    width: 200%; 
 
    height: 100%; 
 
} 
 

 
/* +++++++++++++++++++++++++++++++++++++++++++++ */ 
 

 
.accordion { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
    margin: 50px auto; 
 
    background-color: #FFAE00; 
 
} 
 

 
.accordion ul { 
 
    width: 90%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: 5%; 
 
    height: 100%; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    width: 25%; 
 
    height: 250px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
    float: none; 
 
    transform: skewX(-20deg); 
 
    overflow: hidden; 
 
} 
 

 
.accordion ul li div { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 300px; 
 
    width: 37vw; 
 
    position: relative; 
 
    z-index: 0; 
 
    vertical-align: bottom; 
 
    padding: 55px 45px; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    margin-left: -53px; 
 
    text-decoration: none; 
 
    transform: skewX(20deg); 
 
    font-family: Open Sans, sans-serif; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    text-overflow: ellipsis; 
 
    position: relative; 
 
    z-index: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    font-family: Montserrat, sans-serif; 
 
    text-overflow: clip; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    text-align: left; 
 
    border-bottom: unset; 
 
    margin-bottom: 2px; 
 
    top: 165px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 165px; 
 
    font-size: 13.5px; 
 
    font-weight: 100; 
 
    margin-left: 0; 
 
    height: auto; 
 
} 
 

 
.accordion ul:hover li:hover { 
 
    width: 50%; 
 
} 
 

 
.accordion ul:hover li:hover a { 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    transform: none; 
 
}

<div class="accordion"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <h2>Lorem Ipsum</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

来源

2017-05-26 19:27:44

transform:SkewX不相加/减除的方式工作，它更像是歪斜X到Y度从原来的图片。为了让你撤销转换，你必须使用`transform：unset;' 我在你的小提琴中加入了下面的代码，它已经为我工作了（这也有-webkit-版本）参考于：Remove applied CSS transformation

.accordion ul li { 
transform: unset; 
}

编辑：如果你希望你的文字仍然是扭曲的，在对文本添加一个类，并使用:not()选择

来源

2017-05-26 19:10:45 Dreamer

但是后来它失去了歪斜。 –

说实话，我不完全理解“框”在问题中是什么意思“它是在图片下面的矩形还是出现的文字 – Dreamer

找不到变形未设置的东西，它不适用于我：/ –

盒子有歪斜和背景图像

回答

相关问题