Question

我试图翻转图片效果，但也让它对小型媒体类型做出响应，很难解释，但这里有一个视频链接，我想尝试做什么...... https://www.youtube.com/watch?v=PWoOpJtkyjI&t=118s

任何帮助都会很棒

的jsfiddle https://jsfiddle.net/0b5sz9zo/

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />
    <link rel="stylesheet" type="text/css" href="styles.css" />



</head>

<body>

<nav>
    <a href="#">HOME</a>
    <a href="#">ABOUT</a>
    <a href="#">WRITINGS</a>
    <a href="#">EXTRA</a>
    <a href="#">CONTACT</a>
</nav>

<div class="sect sectOne"></div>
<div class="subSection1">subSection1 test  </div>
<div class="sect sectTwo"></div>
<div class="subSection2">subSection2 test </div>
<div class="sect sectThree"></div>


</body>
</html>





*{margin:0;}

html, body {height:100%;}

h1,h2,h3,h4,h5,h6, p
{margin-bottom:20px;}


nav{
    position:fixed;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,.5);
    z-index:99;
    text-align:center;
}


nav a{
    text-decoration:none;
    color:white;
    margin-left:30px;
    line-height:50px;
}

.sect{

    height:100%;
    background-size:cover;

    background-attachment:fixed;
}

.subSection1{
height:50%;
background-color:white;
color:black;
font-size:50px;
}

    .subSection2{
height:50%;
background-color:white;
color:black;
font-size:50px;
}


.sectOne{

background-image: url("img/bk1.jpg");
}

.sectTwo{
background-image: url("img/image2.jpg");
}

.sectThree{
background-image: url("img/image3.jpg");
}

响应的背景图像翻转

0 个答案: