盒子有歪斜和背景圖像

我想要放在盒子內的圖像與盒子相同的方式傾斜。我希望圖像不會像盒子一樣偏斜。問題是我已將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

找不到變形未設置的東西，它不適用於我：/ –

盒子有歪斜和背景圖像

回答

相關問題