对角线div - 在HTML背景图像中倾斜

我想倾斜CSS中的div。我终于可以做到这一点（初学者），但是，如果我添加一个背景图像，图像也会倾斜。图像需要保持直线。
你能帮我吗？对角线div - 在HTML背景图像中倾斜

谢谢

*{ 
 
    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>

来源

2016-04-14 Hakan Topac

你需要有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>

来源

2016-04-14 21:48:20

-1

你给z-index:2;下的背景一样，它留underthe cild

我做到了覆盖，但你不喜欢你需要它

*{ 
 
    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; 
 
    
 
}

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

来源

2016-04-14 22:09:56 DanyCode

对角线div - 在HTML背景图像中倾斜

回答

相关问题