Question

我想在CSS中扭曲一个div。我终于能够做到了（初学者），但是，如果我添加背景图像，图像也会倾斜。图像需要保持笔直 能帮助我吗？

谢谢

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #EFEFEF;
}
.fullwidth {
    width: 100%;
    height: auto;
    position: fixed;
}

.mid-container {
    width: 1150px;
    padding: 75px 0px;
}

.top_image {
    width: 50%;
    height: 800px;
    background-image:url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
    border-bottom-right-radius: 38px;
    transform: skew(14deg, -13deg) ;
    -webkit-transform: skew(14deg, -13deg) ;
    -moz-transform: skew(14deg, -13deg) ;
    -o-transform: skew(14deg, -13deg) ;
    -ms-transform: skew(14deg, -13deg) ;
    margin: -120px 0 0 -101px;

}
.nav{
    width: 88%;
    height: auto;
    padding: 40px 0px;
    background-color: #ffffff;
    margin: 0 auto;
}
.stroke {
    width: 80%;
    height: 5px;
    background-color: #000000;
    margin: 0 auto;
    opacity: 0.35;
    
}

<!DOCTYPE html>
<html>
<head>
    <title>Hakan Topac</title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
      <div class="top_image"></div>
</body>
</html>

Answer 1

你需要将img放在一个单独的元素中才能做到这一点。

* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #EFEFEF;
}
.fullwidth {
  width: 100%;
  height: auto;
  position: fixed;
}
.mid-container {
  width: 1150px;
  padding: 75px 0px;
}
.top_image {
  width: 50%;
  height: 800px;
  border-bottom-right-radius: 38px;
  transform: skew(14deg, -13deg);
  -webkit-transform: skew(14deg, -13deg);
  -moz-transform: skew(14deg, -13deg);
  -o-transform: skew(14deg, -13deg);
  -ms-transform: skew(14deg, -13deg);
  margin: -120px 0 0 -101px;
}
.h {
  background-image: url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
  display: inline-block;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 38px;
  transform: skew(-14deg, 13deg);
  -webkit-transform: skew(-14deg, 13deg);
  -moz-transform: skew(-14deg, 13deg);
  -o-transform: skew(-14deg, 13deg);
  -ms-transform: skew(-14deg, 13deg);
}
.nav {
  width: 88%;
  height: auto;
  padding: 40px 0px;
  background-color: #ffffff;
  margin: 0 auto;
}
.stroke {
  width: 80%;
  height: 5px;
  background-color: #000000;
  margin: 0 auto;
  opacity: 0.35;
}

<!DOCTYPE html>
<html>

<head>
  <title>Hakan Topac</title>
  <meta charset="utf-8" />
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="top_image"><span class="h"></span>
  </div>
</body>

</html>

Answer 2

你给z-index:2;下的背景，就像它留在cild

一样

我做了封面，但你确实喜欢你需要它

＆＃13;

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #EFEFEF;
}
.under{
  background-image:url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
  background-size:cover;
  height:100%;
  width:100%;
  z-index:2;
}
.fullwidth {
    width: 100%;
    height: auto;
    position: fixed;
}

.mid-container {
    width: 1150px;
    padding: 75px 0px;
}

.top_image {
    width: 50%;
    height: 800px;
    background-image:url(https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg);
    border-bottom-right-radius: 38px;
    transform: skew(14deg, -13deg) ;
    -webkit-transform: skew(14deg, -13deg) ;
    -moz-transform: skew(14deg, -13deg) ;
    -o-transform: skew(14deg, -13deg) ;
    -ms-transform: skew(14deg, -13deg) ;
    margin: -120px 0 0 -101px;

}
.nav{
    width: 88%;
    height: auto;
    padding: 40px 0px;
    background-color: #ffffff;
    margin: 0 auto;
}
.stroke {
    width: 80%;
    height: 5px;
    background-color: #000000;
    margin: 0 auto;
    opacity: 0.35;
    
}

＆＃13;

<body>
  <div class="under">
      <div class="top_image"></div>
  </div>        
</body>

＆＃13;

对角线Div - 在html css的歪斜与背景图象

2 个答案: